Knockout.js 在同一模块中混合敲除代码和jQuery?

Knockout.js 在同一模块中混合敲除代码和jQuery?,knockout.js,knockout-3.0,knockout-3.2,Knockout.js,Knockout 3.0,Knockout 3.2,我在jQuery/javascript代码中使用模块模式,并使用自执行函数,就像在Knockout.js中一样。与官方的knockout.js教程相同 这可能是一个非常主观的问题,但我想知道你对它的看法,以及淘汰赛选手通常如何在他们的web应用程序中处理这个问题 要找到有关此主题的信息并不容易 您会在同一个模块中混合使用knockout.js逻辑和jQuery事件和函数吗? 或者你会把它分成不同的文件和模块吗 此外,有时某些事件不容易在淘汰赛中绑定: 滚动/鼠标滚轮事件 引导事件$'demo'。

我在jQuery/javascript代码中使用模块模式,并使用自执行函数,就像在Knockout.js中一样。与官方的knockout.js教程相同

这可能是一个非常主观的问题,但我想知道你对它的看法,以及淘汰赛选手通常如何在他们的web应用程序中处理这个问题

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

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

此外,有时某些事件不容易在淘汰赛中绑定:

滚动/鼠标滚轮事件 引导事件$'demo'。在'show.bs.modal'上,无论什么; 插件事件:$'demo'.bind'typeahead:select',随便什么; 以正确的方式检索对象$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模块来处理屏幕中Orders元素上的所有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();

敲除的主要规则是:不要在绑定处理程序之外处理DOM。鼠标滚轮事件绑定刚刚好。对于引导,有绑定。插件可以轻松地包装在自定义绑定处理程序中


我强烈建议你熟悉一下。使用Knockout作为基本工具,使用jQuery作为其他工具,并不比使用jQuery作为所有工具都会造成混乱要好多少。

这是一个非常有趣的问题,但我认为它不适合这个网站,因为它有不同的解释。谢谢你的回答,我会看看你的链接!尽管我尽量不使用很多第三方脚本,比如淘汰引导,因为每一个脚本都会给应用程序添加一个需要维护的层,并且可能包含额外的bug,或者在新版本出现时减慢开发速度,例如,引导v4。似乎它的问题论坛也不是很活跃…那么不容易以适当的方式检索对象$this呢?有什么解决办法吗?我可以单击绑定一些东西,但检索元素并不完美…@Alvaro在绑定处理程序中,会向您传递要绑定的DOM元素。我需要一个示例来说明您正在尝试做什么。我想使用击倒自定义绑定处理程序和仅使用init方法调用包含jQuery中所有绑定的bindEvent方法没有太大区别。