4

次のように、jQuery を使用して「 data-bind」属性を divに追加しようとしています。

var messageViewModel = {
    data: ko.observable({   
        message: response.message, 
        sendDateFmted: response.sendDateFmted, 
        messageId: response.messageId
    })
     };

$("<div>",{
    class:"messageToAndFromOtherMember"
}).data("bind", "template: { name: 'message-template', data: data }").appendTo("#messagesToAndFromOtherMember");

ko.applyBindings(messageViewModel);

KnockoutJs では" data-bind " が必要です。しかし、私が得るのはこの空のdivだけです:

<div class="messageToAndFromOtherMember"></div>

のような属性がないdata-bindため、div は空のままであることに注意してください...

4

2 に答える 2

8

jQuery.data()は値をメモリ内に格納し、data-*属性を使用して初期化します。要素作成時に設定することで固執したい場合があります。

$("<div/>", {
  class: "messageToAndFromOtherMember",
  "data-bind": "template: { name: 'message-template', data: data }"
}).appendTo("#messageToAndFromOtherMember");
于 2012-12-02T20:26:29.017 に答える
2

アレクサンダーの答えは、一般的な意味では間違いなく正しいですが、特定の例では、メッセージごとに新しいバインディングスコープを作成することで、コードにメッセージを追加しているように見えることに気付きました。この場合、Knockout の使い方が間違っていると思います (そうでない場合はお知らせください。削除します)。

サーバーから新しいメッセージを取得していて、それらのリストをページに表示しようとしている場合は、ObservableArrayを使用して新しいメッセージを単純にプッシュする方がはるかに優れた構造になります。標準のノックアウト バインディングは、新しいバインディング スコープや新しいメッセージ用の完全に独立したビューモデルを作成する手間をかけずに、新しいメッセージを html に自動的に追加します。この fiddleで実際にこれを見ることができます。

これはかなり不自然な ViewModel です。

var ViewModel = function(data) {
    var self = this;
    self.messages = ko.observableArray();
    self.newMessage = ko.observable('');
    self.addMessage = function() {
        var message = new Message({ message: self.newMessage()});
        self.newMessage('');
        self.messages.push(message);
    };
};
于 2012-12-03T00:29:26.440 に答える