2

jQueryテンプレートプラグイン（Microsoftが作成したもの）を使い始めましたが、今はこの問題に直面しています。テンプレートは、オブジェクトの配列にバインドされた一連のフォーム用です。フォームの1つで何かを変更すると、バインドされたオブジェクトを更新する必要があり、それを自動化する方法がわかりません。

これが簡単な例です（実際のテンプレートとオブジェクトははるかに複雑です）：

<!-- Template -->
<script type="text/html" id="tmplTest">
    <input type="text" value="${textvalue}"/>
</script>

<!-- object to bind -->
<script type="text/javascript">
    var obj = [{textvalue : "text1"},{textvalue : "text2"}]

    jQuery("#tmplTest").tmpl(obj)
</script>

これにより、2つのテキストボックスにデータが入力され、それぞれが対応するオブジェクトの値にバインドされます。ここで、テキストボックスの1つで値を変更した場合、対応するデータオブジェクトの値を更新する必要があります。それを行う方法はありますか？

4

2 に答える 2

9

jQueryテンプレートは実際には双方向のデータバインディングを実装していませんが、Microsoftが開発した別のjQueryプラグインは実装しています。このScottGuthrieの投稿は、実際にはtmplプラグインとDataLinkingプラグインの両方をカバーしています。「クライアントデータリンクのサポート」まで下にスクロールします。ここで、スコットはデータリンクプラグインがどのように機能するかについて詳しく説明します。

ただし、双方向のデータバインディングの場合、knockoutjs拡張機能の方がはるかに優れていてクリーンであることがわかります。宣言型構文はマークアップをクリーンに保ち、カスタムデータバインディングオーバーライドにより多数のアプリケーションが可能になります。最後に、マッピングプラグインは、サーバーからバインディングにJSONを処理するのに非常に優れています。最後に、knockoutjsにはtmplプラグインに基づくバインディングもあります。

あなたの問題で頑張ってください。

編集：更新されたコード例

必要なスクリプト：

<script src="/Scripts/jquery-1.5.0.min.js" type="text/javascript"></script>    
<script src="/Scripts/jquery.tmpl.js" type="text/javascript"></script> 
<script src="/Scripts/knockout.js" type="text/javascript"></script>      
<script src="/Scripts/knockout.mapping.js" type="text/javascript"></script>

それからここに肉とジャガイモがあります

<!-- div for loading the template -->
<div data-bind='template: { name: "tmplTest", foreach: viewModel.list }'>    
</div>

<!-- your template -->
<script type='text/html' id='tmplTest'>
    <div>        
        <span data-bind='text: textvalue, uniqueName: true'></span>
        <input data-bind='value: textvalue, uniqueName: true, valueUpdate:"afterkeydown"'/>
    </div>
</script>

<script type='text/javascript'>
       var viewModel = ko.mapping.fromJS(
        {            
            list:[  { textvalue: "text1" },
                    { textvalue: "text2"}   ]
                }); 

        $(function() {
            ko.applyBindings(viewModel);
        });
 </script>
于 2011-02-23T21:00:12.273 に答える
0

独自のデータリンクを作成できます。注：これを機能させるにはインデックスが必要だったので、データを配列に追加し、それぞれをテンプレートに配置しました。誰かがそれぞれを使用せずにインデックスを取得する方法を知っている場合は、追加してください:) jsfiddle link

<script type="text/html" id="tmplTest">
    {{each inputs}}
    <input type="text" class="datalink" data-key="textvalue" data-index="${$index}" value="${$value.textvalue}"/>
    {{/each}}
</script>
<div id="output"></div>


$.extend(window, {
    data:[
        {inputs: [{textvalue:"text1"},{textvalue:"text2"}]}
    ]
});

$('#output').append($("#tmplTest").tmpl(window.data));

$('#output .datalink').live('change', function(){ // update object on change
    var $this = $(this),
        d = $this.data();
    window.data[0].inputs[d.index*1][d.key] = $this.val();
    console.log(window.data[0].inputs);
});
于 2011-02-23T20:58:47.390 に答える