1

在我的应用程序中，我试图将引导程序和淘汰赛集成到 MVC4 中。我有两个下拉控件，用户可以从中选择一个项目，然后我使用 jQuery 填充旁边的文本框。当我使用 ViewBag 和 @foreach 循环时，这可以正常工作，但是当我尝试使用淘汰赛 observables 时，我遇到了问题。

我可以看到来自 ViewModel 的数据显示在下拉控件中，但它不会更新文本框中的该值。我应该使用特殊的数据绑定属性吗？

一些代码...

<div class="container">
    <div class="col-sm-7 well">
        <form class="form-inline" action="#" method="get">
            <div class="input-group col-sm-8">
                <input class="form-control" value="" placeholder="Work Section" name="q" type="text">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Select <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li data-bind="foreach: Names">
                            <a href="#" data-bind="text: Name, value: Name"></a>
                        </li>
                    </ul>
                    <input name="category" class="category" type="hidden">
                </div>
            </div>
            <div class="input-group col-sm-8">
                <input class="form-control item" value="" placeholder="Select a Color" name="color" type="text">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle item" data-toggle="dropdown">Select <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        @foreach (var item in ViewBag.Colors)
                        {
                            <li>
                                <a href="#">@item</a>
                            </li>
                        }
                    </ul>
                    <input name="category" class="category" type="hidden">
                </div>
            </div>

问题在于名称 foreach，因为颜色工作正常。

我正在使用它来查找页面上的控件并获取所选项目并将其放置在输入控件中......我已经验证这现在仅适用于颜色下拉列表。

$(function () {
        $(".dropdown-menu li a").click(function () {
            $(this).parents(".input-group").find('.form-control').text($(this).text());
            $(this).parents(".input-group").find('.form-control').val($(this).text());
        });
    });

我尝试了以下两种方法均无济于事。让我们从第一个响应开始......

我在页面顶部的标签中放置了以下内容

$(function ViewModel() {
    alert('Here');  // To test if the code generating the model is executed
    this.Names = [{ name: "Person 1", name: "Person 2" }];

    this.selectedName = ko.observable();
    this.clickName = function (name) { this.selectedName = name; }
});

接下来，我在页面顶部放置了一个新的：

<p>Current selection is <span data-bind="text: selectedName"></span></p>

最后，我将此代码放在引导下拉列表中：

<ul class="dropdown-menu" data-bind="foreach: Names">
    <li class="dropdown">
        <a href="#" data-bind="text: Name, value: Name, click: clickName(Name)"></a>
    </li>
</ul>

下拉列表是空的，并且 div 永远不会更新。

在此处输入图像描述

好的，在使用我创建的 ViewModel 并集成 click: function() {$root.Name(Name);} 之后，我现在可以看到我希望的值更新了。

这是我的视图模型代码

$(document).ready(function () {
    function ViewModel() {
        var self = this;
        self.Name = ko.observable("");

        var Names = {
            Name: self.Name
        };

        self.Name = ko.observable();
        self.Names = ko.observableArray([{ Name: "Brian" }, { Name: "Jesse" }, {Name: "James"}]);
    }

    var viewModel = new ViewModel();
    ko.applyBindings(viewModel);
});
4

2 回答 2

1

Bootstrap 创建的下拉菜单本身并不是真正的控件，它只是花哨的 CSS。因此，需要手动处理 Bootstrap 下拉选择。这是 Knockout真正有帮助的地方。

因此，根据您上面的代码，我创建了一个简单的jsFiddle。

下拉列表看起来与此类似（注意foreach绑定的位置与问题中的示例不同，在ul而不是li）：

    <ul class="dropdown-menu" data-bind="foreach: Names">
        <li class="dropdown">
            <a href="#" data-bind="text: Name, value: Name, click: function() {$root.selectedName(Name);}"></a>
        </li>
    </ul>

这假设一个视图模型类似于：

var ViewModel = function() {
    var self = this;

    //Properties
    self.selectedName = ko.observable("NONE");
    self.Names = ko.observableArray([
        { Name:"Name1" },
        { Name:"Name2" },
        { Name:"Name3" },
    ]);    

}

因此，通过使用click绑定，可以将用户选择反馈到 Knockout 视图模型中。当然，function() {$root.selectedName(Name);}理想情况下，它不是视图中的函数（位），而是方法ViewModel，但我认为首先以这种方式显示它会更清楚。

于 2014-03-07T01:44:45.983 回答
1

假设您的视图模型当前看起来像

function ViewModel() {
  this.Names = [{name: x}, ...];
}

你应该扩展如下

function ViewModel() {
  this.Names = [{name: x}, ...];
  this.selectedName = ko.observable();
  this.clickName = function(name) { this.selectedName(name); }
}

然后你会放在data-bind="text: selectedName"你的文本字段和data-bind="click: clickName(Name)"你的链接上。不需要 jQuery 选择器，因此您可以将数据交互与 DOM 结构分离。

于 2014-03-07T01:47:37.373 回答