1

我正在为我的 jQuery / javascript 代码使用模块模式，并且我正在为它使用自执行函数，就像我为 Knockout.js 所做的那样。（与官方的 knockout.js 教程相同）。

这可能是一个非常主观的问题，但我想知道您对此的看法以及淘汰者通常如何在他们的 Web 应用程序中处理这个问题。

找到有关此主题的信息并不容易。

你会在同一个模块中混合 knockout.js 逻辑和 jQuery 事件和函数吗？或者你会把它分成不同的文件和不同的模块吗？

此外，有时有些事件在淘汰赛中并不容易绑定：

  • 滚动/鼠标滚轮事件
  • 引导事件$('#demo').on('shown.bs.modal', whatever);
  • 插件事件：$('#demo').bind('typeahead:select', whatever);
  • 不容易以$(this)正确的方式检索对象

例如，假设我有这个模块来处理客户订单：

function order(){
    var self = this;

    for(var key in data) {
        if(!self.hasOwnProperty(key)) {
            self[key] = data[key];
        }
    }
}
function ordersViewModel(){
    var self = this;
    self.orders = ko.observableArray([]);

    //get the orders for the given date range
    self.getOrders = function(from, to){
        $.get(myUrl + 'orders/getOrders/', function(data){
            self.orders(data.map(function(ordersData) {
                return new order(ordersData);
            }));
        });
    };
}

var MasterModel = function(){
    this.orders = new ordersViewModel()
};

var mm = new MasterModel();

ko.applyBindings(mm);

然后，我有一个 Orders 模块来处理屏幕中 order 元素上的所有 jQuery 事件和操作，它与 knockout.js 模块分开：

function orders() {
    var self = this;
    self.tableWrapper = $('#orders-table-wrapper');

    self.init = function () {
        self.bindEvents();
        self.initTypeahead();
    };

    self.bindEvents = function () {
        //when actions menu is hidden
        self.tableWrapper.on('hide.bs.dropdown', '.dropdown', self.unSelectActions);

        $(document).on("contextmenu", "#orders-table-wrapper table > tbody > tr", self.showContextMenu);

        $('#ordersSearch').change(self.search).keyup(function () {            
            //forcing input change
            $(this).change();
        });

        $('#equipment-id-input').bind('typeahead:select', function (ev, suggestion) {
            $('#equipment-id-input').trigger('change');
        });
    };

    //when actions menu is hidden
    self.unSelectActions = function () {
        $(this).find('.moreActions').removeClass('active');
    };

    //context menu for orders table
    self.showContextMenu = function(event){
        //whatever
    }

    //table filtering
    self.search = function(){
        //whatever
    }
}

var myModels = function(){
    this.orders = new orders().init();
};

var myMasterModel = new myModels();
4

1 回答 1

3

Knockout 的基本规则是：不要在绑定处理程序之外弄乱 DOM。鼠标滚轮事件绑定得很好，请参见此处。对于 Bootstrap，这里有绑定。插件很容易包装在自定义绑定处理程序中（示例）。

我强烈建议您熟悉自定义绑定处理程序。将 Knockout 用于基本内容并使用 jQuery 处理其他所有内容并不会比仅使用 jQuery 处理所有内容更好（这会造成混乱）。

于 2015-09-15T13:32:20.640 回答