天道酬勤,学无止境

如何从knockout.js observableArray 中获取选定的菜单选项?(How to get selected menu option from a knockout.js observableArray?)

问题

我觉得我缺少一些非常基本的东西,但是我无法像使用 Knockout.js 那样使下拉菜单正常工作。

我有一组要在菜单中显示的对象,我需要找到选定的选项并将其发布到服务器。 我可以获取要渲染的菜单,但似乎无法获取所选项目的值。 我的视图模型如下所示:

function ProjectFilterItem( name, id ) {
    this.Name = name;
    this.Id   = id;
}

function FilterViewModel() {
    this.projectFilters = ko.observableArray([
        new ProjectFilterItem( "foo", "1" ),
        new ProjectFilterItem( "bar", "2" ),
        new ProjectFilterItem( "baz", "3" )
    ]);
    this.selectedProject = ko.observable();
}

ko.applyBindings( new FilterViewModel() );

我的视图标记如下所示:

<select 
    id        = "projectMenu"   
    name      = "projectMenu"
    data-bind = "
        options:        projectFilters,
        optionsText:    'Name', /* I have to enquote the value or I get a JS error */
        optionsValue:   'Id',   /* If I put 'selectedProject here, nothing is echoed in the span below */
        optionsCaption: '-- Select Project --'
    "
></select>

<b>Selected Project:</b> <span data-bind="text: selectedProject"></span>

如何让选定的菜单项显示在跨度中,并发布到服务器? (我假设我在 span 中呈现的 observable 与我发布的相同。)我是否需要ProjectFilterItem另一个属性,例如this.selected = ko.observable(false); ? 如果是这样,我将如何将其声明为值的目标?

回答1

您只需要使用值绑定来绑定选定的值:

从选项文档:

注意:对于多选列表,要设置选择了哪些选项,或读取选择了哪些选项,请使用selectedOptions 绑定。 对于单选列表,您还可以使用值绑定读取和写入所选选项。

在你的例子中:

<select 
    id        = "projectMenu"   
    name      = "projectMenu"
    data-bind = "
        value: selectedProject,
        options:        projectFilters,
        optionsText:    'Name',
        optionsValue:   'Id',
        optionsCaption: '-- Select Project --'
    "
></select>

见演示。

受限制的 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 MVC动态表单(ASP.NET MVC Dynamic Forms)
    问题 谁能建议一种使用ASP.NET MVC开发动态表单的好方法吗? 我在页面上有级联下拉菜单(下拉菜单中的选项取决于在上一个下拉菜单中选择的值)。 所有值都来自数据库。 如何使用ASP.NET MVC实现这种行为? 当然,我想在提交表单时在控制器中接收所有值。 回答1 您可以使用FormCollection作为参数来接收来自表单的所有数据: [HttpPost] public ActionResult ActionName(FormCollection collection) { //collection["inputName"]; } 回答2 您可以使用我的FormFactory库非常轻松地执行此操作。 默认情况下,它会针对视图模型进行反映以生成PropertyVm[]数组: ``` var vm = new MyFormViewModel { OperatingSystem = "IOS", OperatingSystem_choices = new[]{"IOS", "Android",}; }; Html.PropertiesFor(vm).Render(Html); ``` 但是您也可以以编程方式创建属性,因此可以从数据库中加载设置,然后创建PropertyVm 。 这是Linqpad脚本的摘录。 ``` //import-package FormFactory /
  • 可观察到的数组在敲出js中推送多个对象(Observable array push multiple Objects in knockout.js)
    问题 ko中是否有任何选项可以同时推送多个元素? 我有两个元素需要插入到名为StatesList的可观察数组中,我无法继续进行下去。 如何将它们都添加。 见下文: var model1 = jQuery.parseJSON(ko.toJSON(argsToPost)); var model = jQuery.parseJSON(ko.toJSON(self.StateModel)); 我需要将两者都添加到我的ObservableArray self.StatesList.push(model); self.StatesList.push(model1); 这是插入到不同的记录中,我想同时插入两个对象 回答1 我们确实有ko.utils.arrayPushAll(array, valuesToPush)作为可以使用的实用程序函数。 但是,它不能直接从observableArrays获得。 如果将pushAll to observableArrays添加pushAll to observableArrays ,则需要对基础数组(在本例中为this())进行操作,然后valueHasMutated()在observableArray上调用valueHasMutated() 。 这将确保对observableArray订阅者仅以最终结果而不是每次推送通知一次。 在KO内核中
  • Knockout.js使每个嵌套对象成为可观察对象(Knockout.js Make every nested object an Observable)
    问题 我正在使用Knockout.js作为MVVM库将我的数据绑定到某些页面。 我目前正在建立一个库,以对Web服务进行REST调用。 我的RESTful Web服务返回一个简单的结构: { id : 1, details: { name: "Johnny", surname: "Boy" } } 我有一个可观察的主要父母myObject 。 当我做 myObject(ko.mapping.fromJS(data)) myObject中的可观察对象是: id name surname 如何使details (理论上可以观察到结构中的任何对象)? 我需要这种行为,以便我可以在详细信息上设置可计算的可观察值,并在内部数据发生任何变化时立即引起注意。 我已经建立了一个基本的递归函数,应该可以解决问题。 当然,它不会成为myObject.details不可观察的对象。 // Makes every object in the tree an observable. var makeAllObservables = function () { makeChildrenObservables(myObject); }; var makeChildrenObservables = function (object) { // Make the parent an observable if it
  • Knockout.js将JSON映射到可观察数组(Knockout.js mapping a JSON into an observable-array)
    问题 我想使用Knockout.js为我的REST服务构建客户端。 我有很多存储库,我想通过不同的URL访问-所以我想出了使用Revealing-Prototype-Pattern的解决方案。 我的问题:我不知道如何使用我从服务中收到的“数据”来映射ItemsProperty。 var Repository = function (url) { this.Url = url; this.Items = ko.observableArray([]); this.PendingItems = ko.observableArray([]); }; Repository.prototype = function () { var getAllItems = function () { var self = this; $.getJSON(self.Url, function (data) { // data=[{"Id":1,"Name":"Thomas","LastName":"Deutsch"},{"Id":2,"Name":"Julia","LastName":"Baumeistör"}] ko.mapping.fromJS(data, self.Items); }); }, ... // i call it like this: customerRepository = new
  • 具有多对多关系的淘汰赛 JS ObservableArray(Knockout JS ObservableArray with many-to-many relationships)
    问题 我正在使用 Knockout.js 创建一个访客列表应用程序,到目前为止一切进展顺利。 但是,我有一个最佳实践问题。 我的应用程序有几种不同类型的对象:其中的访客和标签。 客人可以有多个标签,标签可以有多个客人。 在应用程序的不同点,我需要分别显示两个数组。 例如,我有一个“Guests”视图,您可以在其中看到所有客人及其相关标签,我还有一个“Tags”视图,您可以在其中看到所有标签及其相关客人。 目前,我为客人添加标签的代码如下所示: var tag = function(opts) { this.guests = ko.observableArray() // Other tag code here... } var guest = function(opts) { this.tags = ko.observableArray() // Other guest code here... var self = this this.addTag = function(tag) { self.tags.push(tag) tag.guests.push(self) } } 我知道除了独立更新每个 observableArray 之外,在 Knockout 中必须有更好的方法来处理这种多对多关系。 这也导致了一种递归应用程序结构,其中访客有一个包含标签的标签属性/数组
  • 如何在淘汰赛 js 中将值从一个视图模型传递到另一个视图模型?(How to pass value from one view model to another viewmodel in knockout js?)
    问题 我有两个视图模型,我想将值从一个视图模型传递到另一个视图模型。 我有两个视图模型和两个 div,我想在单击 div 1 中的按钮时显示另一个 div。 这是html代码 <div id="container1"> <ul > <li >Container1 item</li> <!-- ko foreach: myItems --> <li>Item <span data-bind="text: $data"></span></li> <!-- /ko --> </ul> <button data-bind="click:showDiv">show another div</button> </div> <div id="container2" data-bind="visible:show"> <ul> <li >Container2 item</li> <!-- ko foreach: myItems --> <li>Item <span data-bind="text: $data"></span></li> <!-- /ko --> </ul> </div> 这是脚本 function Container1ViewModel() { var self = this; self.myItems = ko.observableArray(); self.myItems
  • Knockout.js 如何在处理函数中访问 $index(knockout.js How to access $index in handler function)
    问题 据我了解, $index在foreach: binding 中可用,给出对象的索引...我有一个click: binding 例如click:foo ,我需要访问foo内的$index 。 有办法吗? 回答1 是的, <input type="button" data-bind="click: function(data, event) { myClickHandler($index, data, event); }"/> 回答2 而不是通过绑定中的函数绕过它,您只需要获取绑定上下文。 只要您可以访问与绑定关联的 DOM 元素,就可以使用ko.contextFor()函数获取绑定上下文及其所有属性。 您在处理程序中获得的事件对象使您可以通过target属性访问节点。 使用它来获取上下文。 var viewModel = { foo: function (data, event) { var context = ko.contextFor(event.target); // do stuff with context.$index() } }; 回答3 使用 ES6 代码更容易。 在我的 html 中,我有一组页面 <span data-bind="foreach: pages"> <a data-bind="click: $parent.gotoPage.bind(
  • Knockout.js获取与数据关联的dom对象(Knockout.js get dom object associated with data)
    问题 我正在使用基因敲除(Knockout.js)来构建动态列表,并且试图弄清楚如何获取与可观察数组中的对象相关联的DOM对象。 具体来说,我想连续获取jQuery。 例子: <ul data-bind="foreach: Item"> <li data-bind="events: {click: getDomObject}, text: 'text: ' + text"> </li> </ul> 在getDomObject函数中,我希望能够获取特定的<li></li> DOM对象,以便可以使用它进行一些jQuery操作。 我曾考虑过将id成员添加到Item ViewModel,然后将该ID添加为订单项的html ID,然后根据该ID进行选择,但我认为应该有一种更简单的方法。 引用由基因敲除生成的动态HTML的正确方法是什么? 回答1 诸如click之类的事件处理程序会传递两个参数。 那是 此事件所属的项目-类似于您使用foreach绑定呈现的可观察数组的条目(本例中为“ Item”)。 并且,一个事件对象为您提供了有关实际事件的更多信息。 该对象包含被单击的DOM元素(键“ target”): getDomObject = function(item, event) { var $this = $(event.target); // ... } 只需注意
  • Knockout.js:在选择元素中清除选择(Knockout.js: clear selection in select element)
    问题 我需要清除<select>元素中的<select> 。 我已经阅读了诸如 Knockoutjs clear selected value in combobox 之类的帖子,并尝试了已接受的答案,但这些解决方案似乎不起作用(不知道自答案被接受以来 Knockout 2 中是否发生了一些变化?) . 这是一个示例视图模型: var ClearSelectionViewModel = function () { var self = this; self.station = ko.observable(); self.selectedStation = ko.observable(); self.selectedStation.subscribe(function (value) { self.station(value); }); self.stations = ko.observableArray(['CLT', 'PHL', 'PHX', 'PIT']); self.clearSelectedStation = function () { self.selectedStation(null); }; }; ko.applyBindings(new ClearSelectionViewModel());​ 当clearSelectedStation被调用时
  • 如何清除/删除Knockout.js中的可观察绑定?(How to clear/remove observable bindings in Knockout.js?)
    问题 我正在将功能构建到用户可以执行多次的网页上。 通过用户的操作,使用ko.applyBindings()创建对象/模型并将其应用于HTML。 数据绑定的HTML是通过jQuery模板创建的。 到目前为止,一切都很好。 当我通过创建第二个对象/模型重复此步骤并调用ko.applyBindings()时,遇到两个问题: 标记显示先前的对象/模型以及新的对象/模型。 尽管对象/模型中的属性之一仍在标记中呈现,但仍发生了JavaScript错误。 为了解决这个问题,在第一遍之后,我调用jQuery的.empty()来删除包含所有数据绑定属性的模板化HTML,以使其不再存在于DOM中。 当用户启动第二遍的过程时,将数据绑定的HTML重新添加到DOM。 但是就像我说的那样,当HTML重新添加到DOM并重新绑定到新的对象/模型时,它仍然包含来自第一个对象/模型的数据,并且我仍然遇到未发生的JS错误。在第一遍。 结论似乎是,即使从DOM中删除了标记,淘汰赛仍保留了这些绑定属性。 因此,我正在寻找一种从淘汰赛中删除这些绑定属性的方法。 告诉淘汰赛,不再有可观察的模型。 有没有办法做到这一点? 编辑 基本过程是用户上传文件。 然后服务器使用JSON对象进行响应,将数据绑定的HTML添加到DOM中,然后使用 mn.AccountCreationModel = new AccountViewModel
  • 了解KnockOut.js
    Knockout是微软出品,是MVVM模型领域内的先驱,使用函数偷龙转凤,最短编辑长度算法实现DOM的同步,兼容IE6。 Knockout是一个JS的MVVM模式的实现,Knockout是建立在3个核心功能之上: 属性监控与依赖追踪声明式绑定模板机制 MVVM MVVM是微软WPF结合发展演变的一种新型的架构框架。 MVVM设计模式的优点 低耦合 Model的修改不会影响视图的展现,ViewModel可绑定不同的View,当View变化时Model可以不变,当Model变化时View也可以不变。开发独立性 前端更加专注于界面,后端更加专注于逻辑与数据。重用性 ViewModel可对应多个视图,如PC或手机。测试方便 MVVM(Model-View-View Model)是创建用户界面的设计模式,它将UI界面分为3部分: Model Model用于存储应用程序的数据,其数据表示业务领域的对象和数据操作,它独立于任何界面。使用KO时通常是使用AJAX向服务端请求数据赖读写数据模型Model。 ViewModel 纯粹用于描述数据内容和页面操作的数据模型。ViewModel不是UI本身,不具有任何HTML和样式的概念。ViewModel不是持久化的数据模型,它仅仅是用户当前使用的未保存的数据。使用KO时,ViewModel是纯粹的不包含HTML的JS对象
  • 使用基因敲除(Jumpout.js)引导程序弹出窗口(Bootstrap popover with knockout.js)
    问题 我有一个应用程序通过AJAX调用接收一些数据。 之后,接收到的数据将使用kickout.js库绑定到DOM元素。 我想使用boostrap的醒目的标记来创建弹出窗口,如下所示: <table class="table table-condensed" data-bind="foreach: items"> <tr> <td><b data-bind="text: $data.id"></b></td> <td data-bind="text: $data.title"></td> <td><a href="#" rel="popover" data-bind="attr: {title: $data.info}" data-placement="top">Info</a></td> </tr> </table> 根据最新的引导程序文档,不需要像$('.popover').popover()类的隐式调用,但是它不起作用。 我想, boostrap.js在document.ready上执行了一些DOM分析,并执行了所有必要的工作以使弹出窗口正常工作。 问题是:在收到AJAX响应后,是否有某种方法可以告诉bootstrap.js对数据执行类似的工作? 或者如何实现这种要求? 回答1 您可以创建自定义dataBinding来使该元素弹出。 查看此jsfiddle演示 ko
  • 具有optionsValue和value的kickout.js(knockout.js with optionsValue and value)
    问题 有没有一种方法可以将value绑定到对象,但是可以将optionsValue作为对象的属性。 到目前为止,如果我同时指定了两者,则所选的optionsValue属性将填充value绑定。 我想使对象保持可观察状态不变,但要在选择列表值中指定要设置的值。 这样,表单提交将发送我选择的optionsValue 。 @Html.DropDownListFor(q => q.DivisionId, new SelectList(Enumerable.Empty<string>()), new { data_bind="options: divisions, optionsText: 'Name', optionsValue: 'Id', value: division, optionsCaption: ' - '" }) function AddCrossPoolGameDialog() { var self = this; self.divisions = ko.observableArray([]); self.division = ko.observable(); self.awayDivisionTeams = ko.computed(function () { var division = ko.utils.arrayFirst(self.divisions()
  • Knockout JS ObservableArray with many-to-many relationships
    I am creating a guest list app using Knockout.js, and so far things are going swimmingly. However I have a best-practices question. My app has several different types of objects: guests and tags among them. Guests can have multiple tags, and tags can have multiple guests. At different points in the app, I need to display both arrays individually. For example, I have a "Guests" view where one can see all the guests along with their associated tags, and I also have a "Tags" view where one can see all tags and their associated guests. At present, the code for me to add a tag to a guest looks
  • 如何创建自动完成的组合框?(How to create an auto-complete combobox?)
    问题 有谁知道用Knockout JS模板创建自动完成组合框的最佳方法吗? 我有以下模板: <script type="text/html" id="row-template"> <tr> ... <td> <select class="list" data-bind="options: SomeViewModelArray, value: SelectedItem"> </select> </td> ... <tr> </script> 有时候,这个清单很长,我想让Knockout与jQuery自动完成功能或一些直接的JavaScript代码一起很好地玩,但是收效甚微。 另外,jQuery.Autocomplete需要一个输入字段。 有任何想法吗? 回答1 这是我编写的jQuery UI Autocomplete绑定。 它旨在通过几个附加options来镜像与选择元素一起使用的options , optionsText , optionsValue , value绑定范式(您可以通过AJAX查询选项,并且可以区分输入框中显示的内容与弹出的选择框。 您无需提供所有选项。 它将为您选择默认值。 这是一个没有AJAX功能的示例:http://jsfiddle.net/rniemeyer/YNCTY/ 这是带有按钮的相同示例,其行为使其更像组合框:http://jsfiddle.net
  • How to add/insert an item into an ObservableArray at a certain position with Knockout.js
    All the knockout examples I have found seem to add a new item to the end of an ObservableArray using something like: viewModel.SomeItems.push(someNewItem); This of course places the item at the end of the array. How to I add an item to the ObservableArray at a certain position? eg. something like: viewModel.SomeItems.push(someNewItem, indexToInsertItAt);
  • How to get selected menu option from a knockout.js observableArray?
    I feel like I'm missing something very basic, but I can't get a dropdown menu to work as I expect using Knockout.js. I have a set of objects I want to present in a menu, and I need to find the selected option and post that to the server. I can get the menu to render, but can't seem to get the value of the selected item. My view model looks like this: function ProjectFilterItem( name, id ) { this.Name = name; this.Id = id; } function FilterViewModel() { this.projectFilters = ko.observableArray([ new ProjectFilterItem( "foo", "1" ), new ProjectFilterItem( "bar", "2" ), new ProjectFilterItem(
  • Replace all elements in Knockout.js observableArray
    I have an observableArray in my view model. After creating the vm I wish to completely replace the data the observableArray. Here's how I'm doing it: //Initial Setup var vm = {}; vm.roles = ko.observableArray([]); ko.applyBindings(vm); //....replace array later on.... vm.roles(["1", "2"]); This seems to be working fine, but I was concerned if this was incorrect and might lead to memory leaks. Can anyone conform if this is the preferred way to update an existing observableArray assuming you wish to replace all its data? I noticed observableArray does have a removeAll() method and wondered if
  • 如何在Selenium 2中选择/获取下拉选项(How to select/get drop down option in Selenium 2)
    问题 我将硒1的代码转换为硒2,找不到在下拉菜单中选择标签或获取下拉菜单的选定值的简便方法。 您知道如何在Selenium 2中做到这一点吗? 这是两个在Selenium 1中起作用但不在2中起作用的语句: browser.select("//path_to_drop_down", "Value1"); browser.getSelectedValue("//path_to_drop_down"); 回答1 查看硒文档中有关使用webdriver填写表单的部分以及Select类的javadoc。 要基于标签选择一个选项: Select select = new Select(driver.findElement(By.xpath("//path_to_drop_down"))); select.deselectAll(); select.selectByVisibleText("Value1"); 要获取第一个选定的值: WebElement option = select.getFirstSelectedOption() 回答2 driver.findElement(By.id("id_dropdown_menu")).click(); driver.findElement(By.xpath("xpath_from_seleniumIDE")).click(); 祝你好运 回答3
  • 使用Knockout.js的jQuery UI datepicker(jQuery UI datepicker with Knockout.js)
    问题 我在玩敲门.js来添加和删除表单中的字段。 到目前为止,它还可以,但是我需要一个datepicker选项,所以我使用了jQuery的UI datepicker。 这有效,但仅在第一个日期选择器上有效,而在其他任何地方都无效。 因此,每当我单击“添加”时,我都会得到新字段,但没有日期选择器。 我用Google搜索和搜索了StackExchange,但没有找到复制字段的解决方案。 的HTML <table data-bind='visible: beschikkingen().length > 0'> <thead> <tr> <th>Beschikkingsdatum</th> <th>Beschikkingsnr</th> <th /> </tr> </thead> <tbody data-bind='foreach: beschikkingen'> <tr> <td><input name="beschikkingsdatum[]" type="text" class="beschikkingsdatum" value="" data-bind='value: beschikkingsdatum, uniqueName: true' /> </td> <td><input class='required number' data-bind='value