KnockOutJS中的自定义视图数据绑定

我在创建KnockOutJS ViewModel中的自定义字段时遇到问题。KnockOutJS中的自定义视图数据绑定

HTML

<table class="table table-striped"> 
    <thead><tr> 
     <th>name</th><th>abb</th><th>combo</th> 
    </tr></thead> 
    <tbody data-bind="foreach: clients"><tr> 
     <td data-bind="text: Name"></td> 
     <td data-bind="text: Abbreviation"></td> 
     <td data-bind="text: NameAbbreviation"></td> 
    </tr></tbody> 
</table>

JS代码

function ClientModel() { 
    var self = this; 
// Bind all data to UI < -- working 
    self.clients = ko.observableArray(data); 
// Not working   
    self.NameAbbreviation = ko.computed(function() { 
     return self.Name + " " + self.Abbreviation; 
    }) 
}; 
ko.applyBindings(new ClientModel());

JOSN DATA（工作）

{"ID":14,"GUID":"c999b888-9566-2e50-a23c-07913d389f99","Name":"Aaron46","Abbreviation":"Corporate Customer","Website":"www.ts2mkg3d0oomo.com","Email":"[email protected]","Active":true,"ModifyDate":"1959-02-14T15:47:53.43","CreatedDate":"1987-09-26T00:37:13.52","CreatedDateString":"9/26/1987","ModifyDateString":"2/14/1959","Status":0,"Message":null},{"ID":443,"GUID":"12c60aa5-03f1-509c-5d49-9caf696c44ce","Name":"Abigail","Abbreviation":"Technical","Website":"www.wsfj97qccj1.com","Email":"[email protected]","Active":true,"ModifyDate":"2007-02-01T06:01:11.3","CreatedDate":"1963-05-11T01:23:21.11","CreatedDateString":"5/11/1963","ModifyDateString":"2/1/2007","Status":0,"Message":null},{"ID":136,"GUID":"63c65e85-0f9b-1f7c-328a-ca253a4881d1","Name":"Adrienne","Abbreviation":"Accounting","Website":"www.ixug6k4eqkjmnr.com","Email":"[email protected]","Active":false,"ModifyDate":"2000-12-14T08:11:31.83","CreatedDate":"1980-05-03T03:25:02.34","CreatedDateString":"5/3/1980","ModifyDateString":"12/14/2000","Status":0,"Message":null}

我能够为b在不创建自定义视图字段的情况下输入所有没有问题的数据！

当我尝试创建NameAbbreviation自定义字段，我得到一个错误

Error: Unable to parse bindings. 
Message: ReferenceError: NameAbbreviation is not defined; 
Bindings value: text: NameAbbreviation

我理解错误，因为KO不能在视图中找到NameAbbreviation。

如何获得此自定义视图NameAbbreviation被KO使用/看到？

来源

2013-01-23 Ravi Ram

是名称和缩写ko.observables？如果是这样，可以尝试：return self.Name（）+“”+ self.Abbreviation（）; – 7zark7

这并不工作：对象＃没有方法 '名称' .. –

当您在foreach循环中时，范围是您要循环的数组项。您的视图模型在根级别定义了NameAbbreviation而不是每个项目。

您可以在这里采取几种方法。

最简单的方法就是在视图模型上创建一个简单的函数，该函数返回格式化的字符串并使用$root或$parent与之绑定。

function ClientModel() { 
    this.clients = ko.observableArray(data); 
    this.NameAbbreviation = function (item) { 
     return item.Name + " " + item.Abbreviation; 
    }; 
};

然后，在喜欢你的UI绑定：

<tbody data-bind="foreach: clients"> 
    <tr> 
     <td data-bind="text: Name"></td> 
     <td data-bind="text: Abbreviation"></td> 
     <td data-bind="text: $root.NameAbbreviation($data)"></td> 
    </tr> 
</tbody>

否则，你可以考虑创建一个“项目”的构造函数，增加了NameAbbreviation，然后通过构造函数发送每个原始数据项。

另一种选择是使用mapping plugin。

来源

2013-01-23 03:21:29

self.FullName = ko.computed（函数（项目）{ 返回item.Name + “” + item.Abbreviation; }）< - - 增加了ko.computed 但是，我越来越**无法读取属性'名称'未定义** –

如果这生活在主视图模型，并返回每个项目的价值，那么你不希望这成为'ko.computed'。它可以是一个正常的功能。 –

好吧..现在我得到一个文字字符串：“function（item）{return item.Abbreviation（）+”“+ item.Active（）;}”返回 –

// use() with item.Name and item.Abbreviation as below 

this.NameAbbreviation = function (item) { 
     return item.Name() + " " + item.Abbreviation(); 
    };

来源

2013-01-23 07:32:51

KnockOutJS中的自定义视图数据绑定

回答

相关问题