[英]Load requirejs module with data-bind (knockout.js)?
What I want to do is load js using the data-bind attribute. 我想做的是使用data-bind属性加载js。 I am fairly new to requirejs and knockout and I'm not sure how to go out this.
我对requirejs和淘汰赛是相当陌生的,我不确定如何解决这个问题。
Right now I have my js split into different require modules for each type of component I have. 现在,对于每种类型的组件,我都将我的js分为不同的require模块。 For example, I have a file that deals with the header dropdown (header.js):
例如,我有一个处理标题下拉列表的文件(header.js):
define('headerDropdown',['jquery', 'bootstrap']),function(jquery, bootstrap){
var $menu = $(".menu");
var $dropdown = $menu.find("ul");
$menu.on("click", function () {
$dropdown.toggle("fast");
});
};
What I want to do is: 我想做的是:
<div class="header" data-bind="headerDropdown">...</div>
And load the respective js. 并加载各自的js。
Most of my js modules are UI changes based on clicks (show and hiding stuff on click) but I only want the js to load is the html block is on the page. 我的大多数js模块都是基于单击的UI更改(单击时显示和隐藏内容),但我只希望js加载是页面上的html块。
Hopefully this makes sense! 希望这是有道理的!
How can I do this using requirejs and knockout? 如何使用requirejs和淘汰赛做到这一点?
Looks like you are mixing concepts. 看起来您正在混合概念。 First let's see the define() definition (suppose the file is headerDropdown.js):
首先让我们看一下define()定义(假设文件是headerDropdown.js):
define('headerDropdown',['jquery', 'bootstrap']),function(jquery, bootstrap){
var $menu = $(".menu");
var $dropdown = $menu.find("ul");
$menu.on("click", function () {
$dropdown.toggle("fast");
});
};
Require.js does not recommend to define a module expliciting their name ('headerDropdown'); Require.js不建议定义一个显式其名称的模块(“ headerDropdown”); you can get the name based on the filename.
您可以根据文件名获取名称。 That's because require has a tool for optimization of the javascript in production: you can concatenate and minimize the output JS.
这是因为require具有用于优化生产中的javascript的工具:您可以串联并最小化输出JS。 The optimizer uses the filename to define the module name.
优化器使用文件名来定义模块名称。 Please, avoid defining with name.
请避免使用名称进行定义。
If you look at the code, you are requiring ['jquery'] but inside the module definition you're using the global jQuery variable. 如果您看一下代码,则需要['jquery'],但在模块定义内部您正在使用全局jQuery变量。 That's OK because jQuery define their module as a global variable, but the convention is to receive in the function the jquery reference:
可以,因为jQuery将其模块定义为全局变量,但是约定是在函数中接收jquery引用:
define('headerDropdown',['jquery', 'bootstrap']),function($, bootstrap) define('headerDropdown',['jquery','bootstrap']),function($,bootstrap)
You are defining a module that manipulates DOM directly, which goes against the DOM update procedure of knockout. 您正在定义一个直接操作DOM的模块,这与淘汰的DOM更新过程相反。 In your case, you are using a data-bing="headerDropwodn" so the headerDropdown is a bindingHandler rather than a simple module.
在您的情况下,您正在使用data-bing =“ headerDropwodn”,因此headerDropdown是bindingHandler而不是简单的模块。 Please check: http://knockoutjs.com/documentation/custom-bindings.html
请检查: http : //knockoutjs.com/documentation/custom-bindings.html
You can load on require as you pointed on the question. 正如您在问题上指出的那样,您可以按需加载。 You just need to change your codes:
您只需要更改代码:
Greetings! 问候!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.