1

ビューに複数のデータバインディングを設定して、テキストボックスに適切な値が含まれるようにし、値が変更されたときに関数を呼び出すようにしたいと考えています。基本的に、フォームの値が変更されるたびに、amplify.js ローカル ストレージを使用したいと考えています。

代理店ビュー

<section class="view">
    <header>
        <button class="btn btn-info btn-force-refresh pull-right"
            data-bind="click: refresh">
            <i class="icon-refresh"></i>Refresh</button>

               <button class="btn btn-info"
            data-bind="click: save">
            <i class="icon-save"></i>Save</button>

        <h3 class="page-title" data-bind="text: title"></h3>
        <div class="article-counter">
            <address data-bind="text: agency().length"></address>
            <address>found</address>
        </div>
    </header>

    <table>
        <thead>
            <tr>
                <th>Agency Name</th>
                <th>Category</th>
                <th>URL</th>
                <th>Number of employees</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: agency">
            <tr>
                <td>
                    <!--<input data-bind="value: agencyName" /></td>-->
                  <input data-bind="value: agencyName, onchange: test()"/>
                <td>
                    <input data-bind="value: category" /></td>
                <td>
                    <input data-bind="value: Url" /></td>
                <td>
                    <input data-bind="value:numberOfEmployees" /></td>
            </tr>
            <tr>
                <td>Activities</td>
                <td>Declared Billings</td>
                <td>Campaigned Billings</td>
            </tr>
            <tr>
                <td>
                    <input data-bind="value: activities" /></td>
                <td>
                    <input data-bind="value: declaredBillings" /></td>
                <td>
                    <input data-bind="value: campaignBillings" /></td>
            </tr>
        </tbody>
    </table>
</section>

エージェンシーのViewModel

define(['services/datacontext'], function (dataContext) {

    //var myStoredValue = amplify.store("Agency"),
    // myStoredValue2 = amplify.store("storeExample2"),
    // myStoredValues = amplify.store();

    var agency = ko.observableArray([]);
    var initialized = false;

    var save = function (agency) {
        return dataContext.saveChanges(agency);
    };

    var vm = { // This is my view model, my functions are bound to it. 
        //These are wired up to my agency view
        activate: activate,
        agency: agency,
        title: 'agency',
        refresh: refresh, // call refresh function which calls get Agencies
        save: save

    };
    return vm;

    function activate() {
        if (initialized) {
            return;
        }

        initialized = true;

        return refresh();

    }

    function refresh() {
        return dataContext.getAgency(agency);   
    }

    function test() {
        alert("test");
    }
});

たとえば、新しい値を入力するたびに

  <input data-bind="value: agencyName, onchange: test()"/>

機能テストを起動したい。次に、ビュー モデルの最新データをローカル ストレージに保存します。

これに対して複数のバインディングを行う方法を知っている人はいますか?

4

2 に答える 2

1

このバインディングを使用する必要があります。

<input data-bind="value: agencyName, event: { change: $parent.onAgencyNameChanged}"/>

$parent を使用して vm オブジェクトを参照したことに注意してください。

そして、viewModel にハンドラーを追加します。

var vm = {  
    ....
    onAgencyNameChanged: function(agency){
       // do stuff
   }
};    
return vm;

もう 1 つの解決策は、すべての機関の AgencyName を購読することです。しかし、これは今回のケースにはふさわしくないと思います。vm を作成した後、これを行うことができます:

ko.utils.arrayForEach(vm.agency(), function(a){
    a.agencyName.subscribe(function(){
    // do stuff
    });
});

お役に立てば幸いです。

于 2013-08-09T08:57:33.613 に答える
0

バインドする必要がある要素ごとに、オブジェクトを手動でサブスクライブしてみてください。

こちらのノックアウト ドキュメントの説明と例をご覧ください。

于 2013-08-09T08:52:34.950 に答える