数据绑定问题与淘汰赛3

Question

在我的应用程序中，我试图将引导和敲除集成到MVC4中。我有两个下拉控件，用户可以从其中选择一个项，然后使用jQuery填充旁边的文本框。当我使用ViewBag和@foreach循环时，这是没有问题的，但是当我试图使用可观察到的敲除方法时，我就有了问题。

我能够在下拉控件中看到来自我的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>

问题是在颜色很好的情况下，前面的名字是正确的。

我使用它来查找页面上的控件，并将所选的项和位置放在输入控件中.我已经验证了这一点现在只适用于下拉颜色。

$(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);
});

Answer 1

Bootstrap创建的下拉列表并不是真正的控件，它只是花哨的CSS。因此，需要手动处理Bootstrap下拉选项。这才是淘汰赛真正有用的地方。

因此，基于上面的代码，我创建了一个简单的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，但我认为首先以这种方式展示它会更清楚一些。

Answer 2

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

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结构分离开来。