Question

我正在运行我的main.js，并在main.js中执行$ .getScript（app.js）。 Knockout.js正在运行，Viewmodel来自app.js.

当我现在尝试将一些自定义绑定插入app.js时，它们不会被淘汰赛加载。同一文件中的viewmodel工作正常。当我把它们放到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);
        });
});

有人能帮助我吗？

Answer 1

此标记正在运行，就像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);
        }
    };
}());

Knockout没有在$ .getScript上加载costom Bindings

1 个答案: