3

ノックアウトを使用してダーティフラグ機能を作成したい。何かが変わった場合にのみ保存ボタンを有効にしたい。私のビューとビューモデルは、knockoutjsチュートリアルのデータの読み込みと保存にある例とまったく同じです。チュートリアルへのリンク

私はここでライアンによって投稿されたフィドルの例に従っています

彼がビューモデルで宣言した以下のコードをどこで宣言するのか理解できません。

 this.dirtyFlag = new ko.dirtyFlag(this);

ノックアウトチュートリアルから例をとると、上に投稿したリンクと下のように試しました

function Task(data) {
this.title = ko.observable(data.title);
this.isDone = ko.observable(data.isDone);
this.dirtyFlag = new ko.dirtyFlag(this);

}

以下のように私の見解をバインドしました

<button data-bind="click: saveOperation , enable: isDirty" >Save</button>

isDirtyが定義されていないため、バインディングを解析できないため、エラーが発生します。

これを実装する方法がわかりません。

4

3 に答える 3

4

koLiteノックアウトのダーティフラグは、小さなライブラリ（https://github.com/CodeSeven/kolite）にすでに実装されています。

または、これを作成する例を示します：http ://www.knockmeout.net/2011/05/creating-smart-dirty-flag-in-knockoutjs.html

于 2013-01-28T20:55:34.167 に答える
3

コードにはいくつかの問題があります。

  1. 関数でを定義しdirtyFlagていますTask。ただし、viewModelインスタンスにバインドされたビューでチェックしています。

  2. データをロードした後にダーティフラグを定義するか、を呼び出す必要がありますdirtyFlag().reset()。

  3. isDirty計算されます。かっこで呼び出す必要があります。

ビューモデルは次のようになります。

function TaskListViewModel() {
    // Data

    function Task(data) {
    this.title = ko.observable(data.title);
    this.isDone = ko.observable(data.isDone);

}

    var self = this;
    self.tasks = ko.observableArray([]);
    self.newTaskText = ko.observable();
    self.incompleteTasks = ko.computed(function() {
        return ko.utils.arrayFilter(self.tasks(), function(task) { return !task.isDone() && !task._destroy });
    });

    this.dirtyFlag = new ko.DirtyFlag(this.isDone);

    // Operations
    self.addTask = function() {
        self.tasks.push(new Task({ title: this.newTaskText() }));
        self.newTaskText("");
    };
    self.removeTask = function(task) { self.tasks.destroy(task) };
    self.save = function() {
        $.ajax("/echo/json/", {
            data: {
                json: ko.toJSON({
                    tasks: this.tasks
                })
            },
            type: "POST",
            dataType: 'json',
            success: function(result) {
                self.dirtyFlag().reset();
                alert(ko.toJSON(result))
            }
        });
    };

     //Load initial state from server, convert it to Task instances, then populate self.tasks
    $.ajax("/echo/json/", {
        data: {
            json: ko.toJSON(fakeData)
        },
        type: "POST",
        dataType: 'json',
        success: function(data) {
            var mappedTasks = $.map(data, function(item) {
                return new Task(item);
            });

            self.tasks(mappedTasks);

            self.dirtyFlag().reset();
        }
    });                               
}

キャンセルボタンのバインド：

<button data-bind="enable: dirtyFlag().isDirty()">Cancel</button>

そして、作業中のフィドル（あなたのフォーク）は次の場所にあります：http：//jsfiddle.net/delixfe/ENZsG/6/

于 2013-02-11T19:01:52.353 に答える
0

ko.editablesプラグインもあります：https ：//github.com/romanych/ko.editables

var user = {
    FirstName: ko.observable('Some'),
    LastName: ko.observable('Person'),
    Address: {
        Country: ko.observable('USA'),
        City: ko.observable('Washington')
    }
};
ko.editable(user);

user.beginEdit();
user.FirstName('MyName');
user.hasChanges();          // returns `true`
user.commit();
user.hasChanges();          // returns `false`
user.Address.Country('Ukraine');
user.hasChanges();          // returns `true`
user.rollback();
user.Address.Country();     // returns 'USA'
于 2013-02-08T20:22:38.950 に答える