1

jQuery と KnockoutJs テンプレートを使用して、DOM で次の HTML を作成したいと思います。

<div class="messageToAndFromOtherMember" id="13">
    <span>the message</span> 
    <span>2012-12-02 14:05:45.0</span> 
</div>

次のように KO テンプレートを書き始めました。

<div class="messageToAndFromOtherMember"  data-bind="attr:{ id: messageId}">
    <span data-bind="text: message"></span> 
    <span data-bind="text: sendDateFmted"></span> 
</div>

ajax リクエストが成功すると、次の js が実行されます。

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

ここで、バインディングを実際に行う方法と場所がわかりません。ajax リクエストが完了する前にメッセージが存在せず、複数のメッセージを持つことができるため...

誰でも解決策を提案できますか?

EDIT 1 :これをhtmlページに追加しました:

<div data-bind="template: { name: 'message-template', data: messageViewModel }"></div>

次のjsエラーが発生します。

不明なエラー: バインドを解析できません。メッセージ: ReferenceError: $messageViewModel が定義されていません。バインディング値: template: { name: 'message-template', data: messageViewModel }

編集 2 : 次のようにコードを変更しました。

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);

あるメッセージを追加してから別のメッセージを追加できるようにするために、jQuery から要素を追加できる必要があることに注意してください。ただし、上記のjQueryコードは機能せず、DOMにデータバインドなどは見られません...

4

3 に答える 3

1

jQueryからdivを動的に生成するために必要なものは次のとおりです。

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

MarkusとPavloの入力に感謝します！私は間違いなくあなたのヒントMarkusを使用します。

于 2012-12-02T20:40:52.730 に答える
1

テンプレートをバインドする場所がわかりません。また、テンプレートがどのように機能するかのドキュメントを読んでくださいKnockout Tempate dinding


ノックアウト テンプレートがどのように機能するかの例をいくつか作成したので、ここにDEMOがあります


まず、テンプレートを次のように初期化する必要があります。

<script id="myTmpl" type="text/html">
    <div class="messageToAndFromOtherMember"  data-bind="attr:{ id: messageId}">
      <span data-bind="text: message"></span> 
      <span data-bind="text: sendDateFmted"></span> 
    </div>
<script>

テンプレートの名前はどこにありid='myTmpl'、それを呼び出すには、次の手順を実行する必要があります。

<div data-bind="template: {name: 'myTmpl', foreach: $data}" ></div>


ここに更新されたDEMOがあります

編集:

また、メッセージの配列がある場合に foreach + テンプレートを使用する方法の例を作成しました。ここにリンクがあります

于 2012-12-02T16:34:18.367 に答える
1 
var messageViewModel = {
    message: ko.observable(), 
    sendDateFmted: ko.observable(), 
    messageId: ko.observable()
};
ko.applyBindings(messageViewModel);

サーバーからデータが到着すると、次のようになります。

messageViewModel.message(response.message);
messageViewModel.sendDateFmted(response.sendDateFmted);
messageViewModel.messageId(response.messageId);

マッピング プラグインを使用すると、代わりに次のようなことができます。

ko.mapping.fromJS(response, messageViewModel);

複数の場所で使用しない場合は、テンプレートは本当に必要ありません。テンプレートなしの方が簡単です。http://jsfiddle.net/3BuHR/を見てください。

テンプレートが必要な場合は、例を次に示します: http://jsfiddle.net/Jxhm5/

テンプレート機能のためだけにノックアウトを使用しているようです。KOはもっと多くのことができます。

代わりに、KO に に基づく DOM 作成を処理させますobservableArray。配列が変更されると、DOM は自動的に更新されます。

var viewModel = {
    messages: ko.observableArray(),
};

function Message(data) {
    data = data || {};
    this.message = ko.observable(data.message);
    this.sendDateFmted = ko.observable(data.sendDateFmted);
    this.messageId = ko.observable(data.messageId);
}

<div class="message-list" data-bind="foreach: messages">
    <div class="messageToAndFromOtherMember"  data-bind="attr:{ id: messageId}">
        <span data-bind="text: message"></span> 
        <span data-bind="text: sendDateFmted"></span> 
    </div>
</div>

サーバーからデータが到着すると、次のようになります。

viewModel.messages.push(new Message(response));

KO は、挿入、削除、並べ替えを追跡し、DOM を更新します。

http://jsfiddle.net/v5sdf/

于 2012-12-02T16:38:06.340 に答える