1

ノックアウト マッピング オブジェクトに操作を追加するのに苦労しています。

これが私が今いるところです-そして私はKnockout: Mapping API informationに従おうとしています。

これは最初の HTML です。

<a href="#" id="AddContact" class="add-button" type="button" data-bind="click: addContact">+ Add Contact</a>

<div id="ContactList">
    <table>
        <thead>
            <tr>
                <th>ID</th><th>Name</th><th></th>
            </tr>
        </thead>
        <tbody data-bind="foreach: $root">
            <tr>
                <td data-bind="text: ContactID"></td>
                <td data-bind="text: DisplayName"></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

そして、これは Knockout を接続するための私の最初の試みです:

var baseModel = {
    addContact: function() {
        alert('Woo!');
    }
};

contacts = ko.mapping.fromJS('[{"ContactID":6,"DisplayName":"Doe, John"},{"ContactID":7,"DisplayName":"Rogers, Mister"}]', { }, baseModel);
ko.applyBindings(contacts);

ここで、追加の引数 ({} とbaseModel) を から削除するとko.mapping.fromJS、すべてのデータがテーブルに正しく表示されます。ただし（そして予想どおり）、「連絡先を追加」リンクでバインドエラーが発生します。もう一度追加するbaseModelと、[連絡先を追加] リンクをクリックしても機能しますが、データが表示されません。なんらかの方法でエラーが発生しないので、そこで何が起こっているのか少し困惑しています。

私はKOが初めてなので、かなり単純なものが欠けているように感じます. StackOverflow 全体を検索しましたが、現時点ではコードをプラグインして何が機能するかを確認しているだけで、ここで何が起こっているのか実際には理解していません。誰かが追加の説明を提供して、正しい方向に向けることができますか? ありがとう。

4

1 に答える 1

0

使用してko.mapping.fromJSいますが、オブジェクト/配列ではなく文字列を渡しています。fromJSON実数配列を使用または渡します。

また、baseModel に Bindings を適用する必要があり、連絡先は VM のフィールドにする必要があります。foreach: contacts次に、奇妙なの代わりに使用できますforeach: $root。

これらの変更をフィドルで参照してください: http://jsfiddle.net/antishok/kR4jc/3/

編集- コードで回答を更新して、質問が自立できるようにします。

JavaScript

var baseModel = {
    addContact: function() {
        alert('Woo!');
    }
};

baseModel.contacts = ko.mapping.fromJSON('[{"ContactID":6,"DisplayName":"Doe, John"},{"ContactID":7,"DisplayName":"Rogers, Mister"}]');

ko.applyBindings(baseModel);​

HTML

<a href="#" id="AddContact" class="add-button" type="button" data-bind="click: addContact">+ Add Contact</a>

<div id="ContactList">
    <table>
        <thead>
            <tr>
                <th>ID</th><th>Name</th><th></th>
            </tr>
        </thead>
        <tbody data-bind="foreach: contacts">
            <tr>
                <td data-bind="text: ContactID"></td>
                <td data-bind="text: DisplayName"></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>​
于 2012-11-04T01:48:54.527 に答える