使用Knockout进行高效的模型绑定

时间:2014-06-03 16:13:35

标签: javascript knockout.js single-page-application

我有一个具有~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中发生绑定)。

1 个答案:

答案 0 :(得分: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