我试图让 Knockout 组件在初始 ko.applyBindings(); 之后绑定(bind)所以我可以动态添加自定义元素。
在我原来的帖子中,我提到了通过 ajax 加载内容,但是当使用 jQuery append 之类的东西将自定义元素添加到 DOM 时,我的问题就出现了。 .
这是一个例子:
$(function() {
// Register a simple widget:
ko.components.register('like-widget', {
template: '<div class="alert alert-info">This is the widget</div>'
});
// Apply bindings
ko.applyBindings();
// Wire up 'add' button:
$('#btnAdd').on('click', function() {
$('#addZone').append("<like-widget></like-widget>");
});
});<link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<body>
Here's a widget, declared inline:
<like-widget></like-widget>
<button id='btnAdd'>Add a new widget to the grey box:</button>
<br/><br/>
<div id='addZone' class="well">
Widgets will be appended here
</div>
<p>When you run this code, the widget custom element is indeed added to the box (see source) but the widget's template is not bound, so nothing appears. How do I get it to bind/appear?</p>
</body>
我已经成功创建了我的新组件,<mynew-widget></mynew-widget>
我已经看到了用它们在我的页面上点缀的乐趣,并且一切都很好地工作......直到我加载包含 <mynew-widget></mynew-widget> 的新内容(例如,一个 AJAX 加载的模式弹出窗口) .没有任何反应。
这是 Knockout 的限制还是我连接不正确?
请告诉我是后者 - 因为我喜欢不必担心何时/何地调用 ApplyBindings 以及 DOM 的哪些部分。
仔细想想,我知道 knockout 需要注意自定义元素已添加到 DOM - 但我希望它可能只适用于 jQuery ' $().on(...) ' 一种方式。
最佳答案
组件绑定(bind)不会神奇地发生:它发生在您调用 ko.applyBindings(); 时。此时在绑定(bind)的HTML中搜索组件,并绑定(bind)它们。
稍后,当您向页面动态添加新组件时,它不会被绑定(bind),除非您显式绑定(bind)它。因此,在您的代码中,该组件被完全忽略。
如前所述,您需要做的是显式绑定(bind)它。但是您必须考虑到您不能绑定(bind)已经绑定(bind)的节点。然而,使用 jquery 创建节点、将其附加到 DOM 并绑定(bind)它非常容易。有一种语法可以指定 View 模型和要将其绑定(bind)到的节点:ko.applyBindings(viewModel, node);
Here you have a full working sample in jsfiddle .这是 fiddle 中的代码:
HTML:
这是一个内联声明的小部件:
<button id='btnAdd'>Add a new widget to the grey box:</button>
<br/><br/>
<div id='addZone' class="well">
Widgets will be appended here
</div>
JavaScript:
ko.components.register('like-widget', {
template: '<div class="alert alert-info">This is the widget</div>'
});
ko.applyBindings()
$('#btnAdd').on('click', function() {
// Create your widget node
var $newWidget = $('<like-widget>');
// Append it to your "append area"
$('#addZone').append($newWidget);
// Apply bindings to the newly added node
ko.applyBindings({}, $newWidget[0]);
});
注意:调用应用绑定(bind)时,我传递了一个空对象:不要传递 null,否则您会收到错误消息。如果您的模板包含 View 模型,它将独立于传递的 View 模型使用。
注意:$newWidget 是一个 jquery 对象。 $newWidget[0] 是 jQuery 对象的第一个(也是唯一一个)DOM 元素,如 applyBindings 所要求的
关于javascript - knockout 组件(不)绑定(bind)新内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27137834/
我需要读入一个包含数字列表的文件。此代码读取文件并将其放入二维数组中。现在我需要获取数组中所有数字的平均值,但我需要将数组的内容更改为int。有什么想法可以将to_i方法放在哪里吗?ClassTerraindefinitializefile_name@input=IO.readlines(file_name)#readinfile@size=@input[0].to_i@land=[@size]x=1whilex 最佳答案 只需将数组映射为整数:@land边注如果你想得到一条线的平均值,你可以这样做:values=@input[x]
它不等于主线程的binding,这个toplevel作用域是什么?此作用域与主线程中的binding有何不同?>ruby-e'putsTOPLEVEL_BINDING===binding'false 最佳答案 事实是,TOPLEVEL_BINDING始终引用Binding的预定义全局实例,而Kernel#binding创建的新实例>Binding每次封装当前执行上下文。在顶层,它们都包含相同的绑定(bind),但它们不是同一个对象,您无法使用==或===测试它们的绑定(bind)相等性。putsTOPLEVEL_BINDINGput
我是一个Rails初学者,但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby中打印出变量(认为它会在终端中出现),但没有得到任何结果。有什么建议吗?我知道Rails调试器,但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R
我正在尝试解析一个CSV文件并使用SQL命令自动为其创建一个表。CSV中的第一行给出了列标题。但我需要推断每个列的类型。Ruby中是否有任何函数可以找到每个字段中内容的类型。例如,CSV行:"12012","Test","1233.22","12:21:22","10/10/2009"应该产生像这样的类型['integer','string','float','time','date']谢谢! 最佳答案 require'time'defto_something(str)if(num=Integer(str)rescueFloat(s
我正在尝试在Rails上安装ruby,到目前为止一切都已安装,但是当我尝试使用rakedb:create创建数据库时,我收到一个奇怪的错误:dyld:lazysymbolbindingfailed:Symbolnotfound:_mysql_get_client_infoReferencedfrom:/Library/Ruby/Gems/1.8/gems/mysql2-0.3.11/lib/mysql2/mysql2.bundleExpectedin:flatnamespacedyld:Symbolnotfound:_mysql_get_client_infoReferencedf
我有一个使用SeleniumWebdriver和Nokogiri的Ruby应用程序。我想选择一个类,然后对于那个类对应的每个div,我想根据div的内容执行一个Action。例如,我正在解析以下页面:https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=puppies这是一个搜索结果页面,我正在寻找描述中包含“Adoption”一词的第一个结果。因此机器人应该寻找带有className:"result"的div,对于每个检查它的.descriptiondiv是否包含单词“adoption
我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
我正在尝试提取方括号内的内容。到目前为止,我一直在使用它,它有效,但我想知道我是否可以直接在正则表达式中使用某些东西,而不是使用这个删除功能。a="Thisissuchagreatday[coolawesome]"a[/\[.*?\]/].delete('[]')#=>"coolawesome" 最佳答案 差不多。a="Thisissuchagreatday[coolawesome]"a[/\[(.*?)\]/,1]#=>"coolawesome"a[/(?"coolawesome"第一个依赖于提取组而不是完全匹配;第二个利用前瞻和
使用Ruby1.8.6/Rails2.3.2我注意到在我的任何ActiveRecord模型类上调用的任何方法都返回nil而不是NoMethodError。除了烦人之外,这还破坏了动态查找器(find_by_name、find_by_id等),因为即使存在记录,它们也总是返回nil。不从ActiveRecord::Base派生的标准类不受影响。有没有办法追踪在ActiveRecord::Base之前拦截method_missing的是什么?更新:切换到1.8.7后,我发现(感谢@MichaelKohl)will_paginate插件首先处理method_missing。但是will_pa
昨晚,我在思考我认为是高级ruby语言的功能,即Continuations(callcc)和Bindingobjects。我的意思是高级,因为我有静态类型的oo语言背景(C#、Java、C++),我最近才发现ruby,所以这些语言特性对我来说不是很熟悉。我想知道这些语言功能在现实世界中的用途是什么。根据我的经验,一切都可以用静态类型的oo语言来完成,但有时我不太同意。我想我在阅读SamRuby的那篇好文章时发现了Continuation的美妙之处/兴趣:http://www.intertwingly.net/blog/2005/04/13/Continuations-for-C