0

KnockOutJS ViewModel 内でカスタム フィールドを作成する際に問題が発生しています。

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":"kltuh32@otyvmj.net","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":"eagai@odgqur.com","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":"tqxcjexh.izoiqv@pyuzqk.net","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}

カスタム ビュー フィールドを作成しなくても、すべてのデータを問題なくバインドできます。

NameAbbreviationカスタム フィールドを作成しようとすると、エラーが発生します

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

KO はビューで NameAbbreviation を見つけることができないため、エラーを理解しています。

このカスタム ビュー NameAbbreviation を KO で使用/表示するにはどうすればよいですか?

4

2 に答える 2

3

ループ内にいる場合foreach、スコープはループしている配列項目です。ビュー モデルはNameAbbreviation、各アイテムではなくルート レベルで定義されています。

ここで取ることができるいくつかのアプローチがあります。

最も簡単な方法は、フォーマットされた文字列を返す単純な関数をビュー モデルに作成し、$rootorを使用してバインドすること$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、コンストラクターを介して各生データ項目を送信することを検討できます。

もう 1 つのオプションは、マッピング プラグインを使用することです。

于 2013-01-23T03:21:29.037 に答える
0 
// use () with item.Name and item.Abbreviation as below

this.NameAbbreviation = function (item) {
        return item.Name() + " " + item.Abbreviation();
    };
于 2013-01-23T07:32:51.350 に答える