使用 Knockout 进行高效模型绑定

Question

我有一个具有约 30 个数据绑定属性的模型。我正在寻找 KO 中模型绑定的最佳实践模式。我知道我可以做到：

Fiddle

HTML

<div>First Name</div>
<input type="text" data-bind="value: FirstName, valueUpdate: 'afterkeydown'" />
<div>Last Name</div>
<input type="text" data-bind="value: LastName, valueUpdate: 'afterkeydown'" />
<div>Full Name</div>
<input type="text" data-bind="value: FullName" />

JavaScript

ko.applyBindings(new viewModel());

function viewModel(){
    var self = this;
    //var model = {};
    var model = {
        FirstName : "bubba",
        LastName : "gump"
    };

    bindModel(self, model);
}

function bindModel(self, model) {
    if(model.FirstName){
        self.FirstName = ko.observable(model.FirstName);    
    }else{
        self.FirstName = ko.observable('');    
    }
    if(model.LastName) {
        self.LastName = ko.observable(model.LastName);        
    }else{
        self.LastName = ko.observable('');       
    }

    self.FullName = ko.computed(function(){        
    return self.FirstName() + " " + self.LastName();}
                                , self);   
}

是否有扩展、模式或最佳实践来处理这种冗长的空值检查或其他设置 gobbly gook？这是一个单页应用程序。如果我以一种方式查看页面，我将绑定到模型。如果我以另一种方式看待它，我根本不绑定任何东西（稍后在 AJAX 中进行绑定）。

Answer 1

您只是不想将这些属性中的任何一个设置为 null 吗？视图会将 '' 视为与 null 相同，因此只需将其设置为等于属性即可。

如果您只是在寻找短手，您可以随时这样做 -

self.LastName = ko.observable(model.LastName ? model.LastName : '');

或者，如果您想重复使用它，您可以这样做 -

self.LastName = makeObservable(model.LastName);
self.FirstName = makeObservable(model.FirstName);

function makeObservable(prop) {
    return ko.observable(prop ? prop : '');
}

最后，您始终可以使用映射插件来映射您的数据并覆盖您想要的映射方式。

http://knockoutjs.com/documentation/plugins-mapping.html