1

頭の中で具体的な概念を確実に理解できるように、この例を非常に (ばかげた) シンプルに保とうとしています。

次のような 2 つの剣道ビューモデルがあるとします。

var usersViewModel = kendo.observable({
    name: "Billy Bob",
    address: "123 Maple St",


});

var postsViewModel = kendo.observable({
    title: "Cool stuff",
    content: "Here is some cool content"

});



kendo.bind($("#users-template"), usersViewModel);
kendo.bind($("#posts-template"), postsViewModel);

(注: これらのバインディングを間違って適用している可能性があります。より良い方法があれば、遠慮なくお知らせください。)

そして、これらのビューモデルを利用するテンプレート:

<script id="users-template" type="text/x-kendo-template">
    <tr>
        <td data-bind="text: name"></td>       
        <td data-bind="text: address"></td> 
    </tr>
</script>

<script id="posts-template" type="text/x-kendo-template">
    <tr>
        <td data-bind="text: title"></td>       
        <td data-bind="text: content"></td> 
    </tr>
</script>

さて、トリッキーな部分について...

「メイン ビュー」として機能する div コンテナーが必要です。この div は、アプリケーションのインデックス ページの最初の項目になり、他のすべてのテンプレートが読み込まれます。このようなもの：

<div id="main-content"></div>

左側には、順序付けられていないリストとリスト項目タグで構成されるサブナビゲーションがあります。リスト項目がクリックされたとき - JQuery を使用して「メインコンテンツ」div のコンテンツをクリアし、クリックされた対応するナビゲーション要素のテンプレートを入力する予定です。

私はこれを使ってみました：

var container = $("#main-content");
container.empty();
container.html("#users-template");

ただし、これは機能しません。剣道のウェブサイトによると、テンプレートは次のような 'data-template' 属性で指定されます data-template="users-template"。JavaScript でこの属性を使用しても機能しないようです。

基本的に、私は彼らの例を再作成しようとしています: http ://demos.kendoui.c​​om/web/mvvm/source.html しかし... テンプレートが読み込まれる空白の div から始めます。

以前、Backbone.js を使用してこのような類似のインターフェイス要素を作成したことがありますが、非常に簡単でした。剣道の最善の方法を知りたいだけです。

アドバイスをいただければ幸いです。

4

1 に答える 1

2

Kendo は、スクリプト タグ内にあるタグへのバインドを実際にはサポートしていないようです。これは、動作を示す（やや粗い）JSFiddleです：http://jsfiddle.net/9tcav/28/

タグがまだスクリプトタグ内にあるときに監視可能なオブジェクトをtrタグにバインドすると、タグの内容は決して変わりません。

ただし、テンプレートをインスタンス化し、それを main-content-div に挿入してから、レンダリングされた結果のテンプレートにデータをバインドすると、すべて正常に機能します。

データを動的に変更する必要がありますか? そうでない場合は、データをレンダリングするために、観測可能なオブジェクトを使用せずに、まっすぐなテンプレートを使用するだけです。

var template = kendo.template($("#template").html());
$("#main-content").html(template({title: "Title", content: "Content"}));

ナビゲーション リンクがクリックされてビューがインスタンス化されたときだけでなく、データを動的に変更する必要がある場合は、最初にテンプレートをレンダリングしてからデータをバインドします。

于 2012-08-10T07:43:20.090 に答える