0

main.js を実行し、main.js 内から $.getScript(app.js) を実行しています。Knockout.js が実行され、Viewmodel は app.js から取得されます。

カスタム バインディングを app.js に挿入しようとすると、ノックアウトによって読み込まれません。同じファイル内のビューモデルは正常に機能します。それらをmain.jsの最後にドロップすると、ロードされてknockout.jsで使用できるようになります

バインディングは次のように定義されます。

ko.bindingHandlers.yourBindingName

これは私の app.js です:

var _dragged;
ko.bindingHandlers.drag = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var dragElement = $(element);
        var dragOptions = {
            helper: 'clone',
            revert: false,
            start: function () {
                _dragged = valueAccessor().value;
            },
            cursor: 'default'
        };
        dragElement.draggable(dragOptions).disableSelection();
        alert('init');
    }
};

ko.bindingHandlers.drop = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var dropElement = $(element);
        var dropOptions = {
            drop: function (event, ui) {
                valueAccessor().value(_dragged);
            }
        };
        dropElement.droppable(dropOptions);
        alert('init');
    }
};

ko.bindingHandlers.sortable = {
    init: function (element, valueAccessor) {
        // cached vars for sorting events
        var startIndex = -1,
            koArray = valueAccessor();

        var sortableSetup = {
            // cache the item index when the dragging starts
            start: function (event, ui) {
                startIndex = ui.item.index();
            },
            // capture the item index at end of the dragging
            // then move the item
            stop: function (event, ui) {

                // get the new location item index
                var newIndex = ui.item.index();

                if (startIndex > -1) {
                    //  get the item to be moved
                    var item = koArray()[startIndex];

                    //  remove the item
                    koArray.remove(item);

                    //  insert the item back in to the list
                    koArray.splice(newIndex, 0, item);

                    //  ko rebinds the array change so remove duplicate item
                    ui.item.remove();
                }

            }
        };

        // bind
        $(element).sortable(sortableSetup);
    }
};

function LanesModel(lanes) {
    var self = this;
    this.lanes = ko.observableArray(lanes);
    this.observableLanes = ko.computed(function () {
        //for (var i = 0; i < self.lanes.length; i++) {
        //    self.lanes()[i].childs = new ko.observableArray(lanes[i].childs);
        //}
        //self.lanes().childs = ko.observableArray(); //ko.observableArray(lanes.childs);
    }, this);
}

これは、main.js から app.js をロードする方法です。

$.when(parseLanes()).done(function(o1) {
    //alert(o1); //!!debug
    $.when($.getScript("./Scripts/app_lanes.js"), $.getScript("http://code.jquery.com/ui/1.10.0/jquery-ui.js"))
        .done(function() {
            var vm = new LanesModel(uniqueLanes);
            ko.applyBindings(vm);
        });
});

誰でも私を助けることができますか？

4

1 に答える 1

0

このマークアップは、AMD (RequireJS) で使用されるものと同様に機能しています。

(function () {
    var _dragged;
    ko.bindingHandlers.drag = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
            var dragElement = $(element);
            var dragOptions = {
                helper: 'clone',
                revert: false,
                start: function () {
                    _dragged = valueAccessor().value;
                },
                cursor: 'default'
            };
            dragElement.draggable(dragOptions).disableSelection();
            alert('init');
        }
    };

    ko.bindingHandlers.drop = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
            var dropElement = $(element);
            var dropOptions = {
                drop: function (event, ui) {
                    valueAccessor().value(_dragged);
                }
            };
            dropElement.droppable(dropOptions);
            alert('init');
        }
    };

    ko.bindingHandlers.sortable = {
        init: function (element, valueAccessor) {
            // cached vars for sorting events
            var startIndex = -1,
                koArray = valueAccessor();

            var sortableSetup = {
                // cache the item index when the dragging starts
                start: function (event, ui) {
                    startIndex = ui.item.index();
                },
                // capture the item index at end of the dragging
                // then move the item
                stop: function (event, ui) {

                    // get the new location item index
                    var newIndex = ui.item.index();

                    if (startIndex > -1) {
                        //  get the item to be moved
                        var item = koArray()[startIndex];

                        //  remove the item
                        koArray.remove(item);

                        //  insert the item back in to the list
                        koArray.splice(newIndex, 0, item);

                        //  ko rebinds the array change so remove duplicate item
                        ui.item.remove();
                    }

                }
            };

            // bind
            $(element).sortable(sortableSetup);
        }
    };
}());
于 2013-02-13T21:40:59.970 に答える