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 回答