天道酬勤,学无止境

How replace data-bind tag with {{}} style bindings in KnockoutJS?

I want to declare my bindings as with AngularJS, but I'm using the KnockoutJS library. That is, I want to use Knockout but with the syntax I know from Angular. E.g.:

Today's message is: <span data-bind="visible:true,text:myMessage"></span>

I want to write using {{}} notation, like so:

Today's message is: <span {{visible:true,text:myMessage}}></span>

How can I replace data-bind attributes with {{}} based syntax in KnockoutJS?

评论

http://mbest.github.io/knockout.punches/ is all you need.

Knockout Punches convert traditional KO syntax to something like AngularJS

<div>Hello {{name}}.</div>

I personally find it very easy to use.

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 由于asp.net,使用带下划线的下划线模板进行敲除(Using Underscore Template with Knockout using interpolate due to asp.net)
    问题 问题 由于性能原因,我需要使用下划线模板而不是默认的KnockoutJS模板引擎。 但是,由于我在asp.net环境中,由于asp.net处理程序, <%和%>的默认标签将不起作用。 工作jsFiddle jsFiddle无法正常工作 我需要应用以下内容: _.templateSettings = { interpolate : /\{\{(.+?)\}\}/g }; 使用{{和}}标签 注释7:使用Underscore.js模板引擎 默认情况下,Underscore.js模板引擎使用ERB样式的分隔符( <%= ... %> )。 这是前面的示例的模板在Underscore下的外观: <script type="text/html" id="peopleList"> <% _.each(people(), function(person) { %> <li> <b><%= person.name %></b> is <%= person.age %> years old </li> <% }) %> </script> 这是将Underscore模板与Knockout集成的简单实现。 集成代码只有16行,但足以支持Knockout数据绑定属性(因此也嵌套了模板)和Knockout绑定上下文变量($ parent,$ root等)。 如果您不喜欢<%= ... %>分隔¬
  • 使用包含前缀的knockoutjs 设置id 属性(Setting the id attribute with knockoutjs including a prefix)
    问题 我正在使用 KnockoutJS 迭代一个对象,如下所示: 现在这一切都有效。 但我遇到的问题是它将button的id设置为一个数字。 所以它看起来像这样: <button id="1">Button 1</button> <button id="3">Button 2</button> <button id="8">Button 3</button> 所以我试图在 'Id' 属性前面放一个前缀,如下所示: <div data-bind="foreach:Items"> <button data-bind="text: Name, attr: {'id': 'myprefix_' + Id}"></button> </div> 但这似乎不起作用。 当我这样做时,我的id会充满一些 Knockout 可观察函数...... 所以我的问题是,如何在指定字段的id属性时添加前缀? 回答1 如果Id是可观察的,则必须“解开”它: 'myprefix_' + Id() 。 回答2 今天实际使用了这个 - 解开我必须做的可观察的: <button data-bind="attr: { id: 'prefix_' + $index() }"> Send </button> 希望这可以帮助。 回答3 我认为最好使用 $index 例如 <div data-bind="foreach
  • 使用onclick或带有KnockoutJS的click绑定传递参数(Passing parameter using onclick or a click binding with KnockoutJS)
    问题 我有这个功能: function make(place) { place.innerHTML = "somthing" } 我曾经用普通的JavaScript和html来做到这一点: <button onclick="make(this.parent)">click me</button> 如何使用惯用的tickout.js做到这一点? 回答1 如果您在Knockout中设置了单击绑定,则会将事件作为第二个参数传递。 您可以使用事件获取发生点击的元素,然后执行所需的任何操作。 这是演示的小提琴:http://jsfiddle.net/jearles/xSKyR/ 另外,您可以创建自己的自定义绑定,该绑定将接收绑定到的元素作为第一个参数。 在初始化时,您可以附加自己的click事件处理程序以执行所需的任何操作。 http://knockoutjs.com/documentation/custom-bindings.html 的HTML <div> <button data-bind="click: clickMe">Click Me!</button> </div> s var ViewModel = function() { var self = this; self.clickMe = function(data,event) { var target = event
  • How should I be cleaning up KnockoutJS ViewModels?
    I have a single-page app where the user pages through lists of items. Each item, in turn, has a list of items. An observable array is updated with new items from the server retrieved via an AJAX request. This all works fine. Unfortunately after a few pages, the number of operations performed (and the amount of memory used in browsers like FireFox and IE8) keeps going up. I've tracked it down to the fact that elements in my observable array are not being cleaned up properly and are actually still in memory, even though I've replaced the items in my observable array with new data. I've created a
  • 我应该如何清理 KnockoutJS ViewModels?(How should I be cleaning up KnockoutJS ViewModels?)
    问题 我有一个单页应用程序,用户可以在其中浏览项目列表。 反过来,每个项目都有一个项目列表。 一个 observable 数组被更新为通过 AJAX 请求从服务器检索到的新项目。 这一切正常。 不幸的是,在几页之后,执行的操作数量(以及在 FireFox 和 IE8 等浏览器中使用的内存量)不断增加。 我已经追踪到一个事实,即我的 observable 数组中的元素没有被正确清理并且实际上仍然在内存中,即使我已经用新数据替换了我的 observable 数组中的项目。 我创建了一个小例子来复制我看到的问题: HTML: <p data-bind="text: timesComputed"></p> <button data-bind="click: more">MORE</button> <ul data-bind="template: { name: 'items-template', foreach: items }"> </ul> <script id="items-template"> <li> <p data-bind="text: text"></p> <ul data-bind="template: { name: 'subitems-template', foreach: subItems }"></ul> </li> </script> <script id=
  • Pass string parameters into click binding while retaining default params in Knockoutjs
    I'd like to pass arguments in to functions called on click, while retaining the default args. The issue is in the Hops part. I tried to make the remove<this> functions more clean with: self.removeItem = function(item, name){ self[name].destroy(item); } and <a href="#" data-bind="click: function() { $root.removeItem($data, "hops") }, visible: $root.hops.countVisible() > 1">Delete</a> I have tried passing $data, event, "hops" also. I went based on Knockout.js - passing parameters but I want to access the current element (the hop, grain, or yeast I'm deleting) while also giving the string of the
  • jQuery UI datepicker更改事件未被KnockoutJS捕获(jQuery UI datepicker change event not caught by KnockoutJS)
    问题 我正在尝试将KnockoutJS与jQuery UI结合使用。 我有一个附有日期选择器的输入元素。 我当前正在运行knockout.debug.1.2.1.js ,看来change事件从未被Knockout捕获。 该元素如下所示: <input type="text" class="date" data-bind="value: RedemptionExpiration"/> 我什至尝试更改valueUpdate事件类型,但无济于事。 Chrome似乎在更改值之前就引起了focus事件,但IE却没有。 是否有一些淘汰方法可以“重新绑定所有绑定”? 从技术上讲,我只需要更改值,然后再将其发送回服务器即可。 因此,我可以接受这种解决方法。 我认为问题出在日期选择器的问题上,但我不知道该如何解决。 有任何想法吗? 回答1 我认为对于jQuery UI datepicker,最好使用自定义绑定,该绑定将使用datepicker提供的API与Date对象进行读写。 绑定可能看起来像(从我这里的答案): ko.bindingHandlers.datepicker = { init: function(element, valueAccessor, allBindingsAccessor) { //initialize datepicker with some optional
  • KnockoutJS:在 Select 中的每个 Option 上调用的单击事件(KnockoutJS: click event invoked on every Option in Select)
    问题 我希望 Knockout 在用户单击 SELECT 元素中的选项时调用一个事件。 这是我的 JavaScript: function ReservationsViewModel() { this.availableMeals = [ { mealName: "Standard (sandwich)", price: 0 }, { mealName: "Premium (lobster)", price: 34.95 }, { mealName: "Ultimate (whole zebra)", price: 290 } ]; } ko.applyBindings(new ReservationsViewModel()); 这是我的 HTML: <select data-bind="foreach: availableMeals"> <option data-bind="text: mealName, click: alert('hello')" /> </select> 但是当我运行它时,即使实际上没有点击任何选项,应用程序也会显示“你好”三遍。 我究竟做错了什么? 回答1 您应该使用change绑定而不是click和option optionsText绑定而不是option标记,并在change绑定中使用function而不是仅调用alert : <select data
  • 如何使用jQuery,RequireJS和KnockoutJS创建基本的TypeScript项目(How to create basic TypeScript project using jQuery, RequireJS, and KnockoutJS)
    问题 我一直在寻找一个简单的方法,以使用RequireJS,jQuery和KnockoutJS创建Visual Studio 2012 TypeScript项目的最基本示例。 有几个示例可供使用,但对我而言,有些示例比我想的要复杂,因此我着手创建方法,并将其发布在此处以供公众审查。 作为问答式知识共享练习,我已经回答了自己的问题。 对于那些不熟悉的人,这里是其中包含的组件的快速细分... TypeScript-一个Visual Studio扩展,允许脚本通过JavaScript的超集语言创建.TS文件。 这提供了定义与方法和变量关联的数据类型的功能-JavaScript否则会丢失该数据类型。 这样,编译时间检查可以确保正确使用,以减少运行时冲突。 在构建Visual Studio项目时,Visual Studio扩展会将脚本编译为实际的JavaScript。 因此,此扩展程序带有其自己的编译器-tsc.exe。 预期生成的JavaScript文件将部署到生产环境,而不是源代码.ts文件。 jQuery-一个用于HTML文档遍历和操纵,事件处理,动画和Ajax交互的JavaScript框架。 RequireJS-依赖加载器。 有时JavaScript引用可能会变得疯狂。 这试图帮助解决这些问题。 我的示例显示,即使正在使用许多JavaScript文件,HTML也仅引用其中一个
  • Using Underscore Template with Knockout using interpolate due to asp.net
    Issue I need to use the underscore template instead of the default KnockoutJS template engine due to performance. However, since I'm in an asp.net environment the default tags of <% and %> will not work because of the asp.net handler. Working jsFiddle Not Working jsFiddle What I need is to apply something like the following: _.templateSettings = { interpolate : /\{\{(.+?)\}\}/g }; Making it use the {{ and }} tags Note 7: Using the Underscore.js template engine The Underscore.js template engine by default uses ERB-style delimiters (<%= ... %>). Here’s how the preceding example’s template might
  • KnockoutJs v2.3.0:错误您不能多次将绑定应用于同一元素(KnockoutJs v2.3.0 : Error You cannot apply bindings multiple times to the same element)
    问题 我刚刚升级到2.3.0,现在出现错误 您不能多次将绑定应用于同一元素。 我没有进入2.2.1。 我从MVC控制器中获取了部分视图,并在单击href后将其添加到页面中。 该错误发生在我第二次单击链接以获取部分视图时。 我多次这样做。 有没有一种方法可以解决此问题并避免引发新的错误? 这是我的代码: $.get(url + "GetAssignedCompaniesView?layoutId=" + layoutId + "&noCache=" + new Date().getMilliseconds(), function (result) { $("#editAssignedPartial").html($(result)); showEditAssignedArea(true); $(window.document).ready(function () { // error is thrown here ko.applyBindings(self, window.document.getElementById("editAssigned")); $("#layoutId").attr("value", layoutId); updateTypeHiddenElement.attr("value", "companies"); }); }); <div id=
  • KnockoutJS-select与optgroup和javascript对象的绑定值(KnockoutJS - Binding value of select with optgroup and javascript objects)
    问题 我在这里找到了一个使用KnockoutJS使用optgroup创建选择列表的示例。 这可以正常工作,但是我想将下拉列表的值绑定到我自己的javascript对象,然后访问该对象的特定属性: <select data-bind="foreach: groups, value:selectedOption"> <optgroup data-bind="attr: {label: label}, foreach: children"> <option data-bind="text: label"></option> </optgroup> </select> function Group(label, children) { this.label = ko.observable(label); this.children = ko.observableArray(children); } function Option(label, property) { this.label = ko.observable(label); this.someOtherProperty = ko.observable(property); } var viewModel = { groups: ko.observableArray([ new Group("Group 1", [ new
  • 在淘汰赛上输入仅数字类型(make an input only-numeric type on knockout)
    问题 我读了很多教程,但我不知道该怎么做,这是输入 input(type="text",name="price",id="price"data-bind="text: price,valueUpdate:['afterkeydown','propertychange','input']") 这是我的viewModel price: ko.computed(function() { return parseFloat(this.replace(' ','').replace(/[^0-9\.]+/g,"")) || ''; },this) 但这会导致错误:此方法无法替换? 我如何将价格值传递给计算函数? 回答1 最好创建自定义绑定http://knockoutjs.com/documentation/custom-bindings.html,该绑定仅接受允许的字符[0-9 ,.]作为数字表示形式。 将此行放入您的视图 <input id="text" type="text" data-bind="numeric, value: number"> 将此行放入模型中(记住将数字绑定为可观察的属性) ko.bindingHandlers.numeric = { init: function (element, valueAccessor) { $(element).on("keydown"
  • 谷歌地图和淘汰赛(Google maps and knockoutjs)
    问题 我正在制作一个单页应用程序,在第二个视图中我需要显示谷歌地图。 我正在使用要创建地图对象的 Google 地图 API。 var map = new google.maps.Map(mapId, { zoom: 5, center: new google.maps.LatLng(55, 11), mapTypeId: google.maps.MapTypeId.ROADMAP }); 参数mapId给了我一个问题。 该视图包含一个 id 为“mapId”的 div,但我无法获取该 id,因此无法显示地图。 我尝试过 HTML 绑定、属性绑定,但它不起作用。 我是淘汰赛的新手。 请建议一些方法 回答1 您应该像这样使用自定义绑定: ko.bindingHandlers.map = { init: function (element, valueAccessor, allBindingsAccessor, viewModel) { var mapObj = ko.utils.unwrapObservable(valueAccessor()); var latLng = new google.maps.LatLng( ko.utils.unwrapObservable(mapObj.lat), ko.utils.unwrapObservable(mapObj.lng)); var
  • The “with” binding of KnockoutJS in AngularJS?
    I have just switched from KnockoutJS to AngularJS and I am not able to find the KnockoutJS's "with" data-bind in AngularJS. Here is the piece of code in KnockoutJS. The "with" binding creates a new binding context, so that descendant elements are bound in the context of a specified object. <h1 data-bind="text: city"> </h1> <p data-bind="with: coords"> Latitude: <span data-bind="text: latitude"> </span>, Longitude: <span data-bind="text: longitude"> </span> </p> <script type="text/javascript"> ko.applyBindings({ city: "London", coords: { latitude: 51.5001524, longitude: -0.1262362 } }); <
  • Formatting rules for numbers in KnockoutJS
    I have a viewModel with a bunch of numbers with lots of decimal places. If my bindings look like this: <tr> <td data-bind="text: Date"></td> <td data-bind="text: ActualWeight"></td> <td data-bind="text: TrendWeight"></td> </tr> Then, of course, the output has all the decimal places and is very unreadable. Changing the bindings to look like this solves the problem, but is very verbose and "noisy": <tr> <td data-bind="text: Date"></td> <td data-bind="text: ActualWeight().toFixed(1)"></td> <td data-bind="text: TrendWeight().toFixed(1)"></td> </tr> Note, this is one small snippet and having to add
  • Knockoutjs 计算传递参数(Knockoutjs computed passing parameters)
    问题 我想知道knockoutjs是否可以在绑定时传递参数。 我正在绑定一个复选框列表,并希望绑定到我的视图模型中的单个计算 observable。 在我的视图模型中(基于传递给读取函数的参数),我想根据某些条件返回真/假。 var myViewModel=function(){ this.myprop=ko.computed({read: function(){ //would like to receive an argument here to do my logic and return based on argument. } }); }; <input type="checkbox" data-bind="checked: myprop(someval1)" /> <input type="checkbox" data-bind="checked: myprop(someval2)" /> <input type="checkbox" data-bind="checked: myprop(someval3)" /> 有什么建议么? 回答1 创建一个函数,其唯一目的是返回一个计算出的 observable。 它可以根据需要接收参数。 如果您希望它是双向绑定,则它必须是一个单独的计算 observable。 然后在您的绑定中,使用适当的参数调用该函数。 它返回的计算出的
  • 将KnockoutJS与多个页面一起使用(Using KnockoutJS with multiple pages)
    问题 我刚刚开始学习KnockoutJS。 我感到困惑的一件事是,样本似乎都集中在具有单个视图模型的单个视图上。 大型应用程序如何运作? 我将要编写一个纯HTML / jquery应用程序。 所有数据都通过ajax作为json提供。 应用程序顶部有一个通用的导航标题,其中包含使用Twitter Bootstrap实现的多个选项卡和子选项卡。 如果我将应用程序的每个页面都构建为单独的html视图和js视图模型,那么如何维护单个统一标头? 如果这是服务器端的asp.net网络表单,我将使用母版页。 但这都是客户端。 淘汰赛中有什么可以解决这个问题的吗? 还是另一个可以解决此特定问题的库? 我想我可以在一个大的html页面中编写该应用程序,但是它会很大。 一定有更好的方法。 回答1 您可以明确地将视图模型分开。 在ko.applyBindings方法中,第一个参数是viewmodel,但是第二个可选参数是将该视图模型绑定到的dom元素。 我没有仔细看过Twitter Bootstrap,但是我设置了jsfiddle,它应该让您步入正轨:http://jsfiddle.net/JasonMore/ygT6v/10/ 看法 <ul id="menu" data-bind="foreach:options"> <li data-bind="text:option"></li> </ul>
  • knockoutjs click binding within foreach binding
    EDIT: Problem was not related to the binding but to a simple JavaScript mistake. I have a question concerning a click binding within a foreach binding. I have a list with items showing a drop down box to select a value from the master data. Items can be added and removed from that list. The button to remove items is nested in the foreach binding. Therefore I expected that I should bind it with $parent> <button data-bind="click: $parent.removeNumber">-</button> That does not work. But the following version works: <button data-bind="click: removeNumber">-</button> I do not understand why. The
  • KnockoutJS:从JavaScript模板中访问数组中项目的索引(KnockoutJS: Access index of item in array from within the JavaScript template)
    问题 我使用KnockoutJS从数组填充列表: <div data-bind:"foreach: list"> <input type="text" data-bind="value: myText" /> </div> function ViewModel() { self.list = ko.observableArray([ new listItem("sample text") ]); }; function listItem (text) { this.myText = text; }; 我可以为输入的各个实例分配一个id,如下所示 <input data-bind="attr: { id: $index } ... 如何从listItem函数中访问此索引? 我希望能够做类似的事情 function listItem (text) { this.myText = text; this.index = $index; }; 为了将其用于进一步处理。 回答1 您可以创建一个自定义绑定,将您的属性设置为索引,如下所示: ko.bindingHandlers.setIndex = { init: function(element, valueAccessor, allBindings, data, context) { var prop = valueAccessor()