Question

我是淘汰赛的新手，所以我真的需要一些建议来完成这个要求。在我的jsfiddle中，我与动态显示模态中的数据有关联。我使用它来填充下拉列表中的数据

var eventViewModel = function() {
  var me = this,
    eventTypes = [{
      cls: 'fa fa-fw fa-globe',
      label: 'Create Public Venue',
      text: 'Visible to anyone',
      url: "Link-to-Public"
    }, {
      cls: 'fa fa-fw fa-lock',
      label: 'Create Private Venue',
      text: 'Visible only to people invited',
      url: "Link-to-Private"
    }];

  //ko.cleanNode($('#add-event-modal .dropdown-menu')[0]); //ongoing
  // How to clear the dropdown value (in actual solution the values are repeating everytime the modal called)

  me.EventForm = new viewModel();

  me.eventTypes = ko.observableArray(eventTypes);
  me.change = function(type, event) {
    alert('Changed');
    //Changing body content
    //event.preventDefault();
    //var elem = $(".modal-body");
    //transitionToNewContent(elem, type.url);
  }
};

我有三个问题：

我试图将引导下拉列表绑定到标题但我不知道如何使用引导下拉列表来完成它。应根据所选数据显示所选项目，并禁用所选值或添加higlight和图标fa-check。我尝试过研究，但无济于事，我似乎根本无法理解。
在我的解决方案中，验证工作正常，但在jsfiddle中，它似乎无法正常工作。我的问题是如何使用bootstrap错误显示错误。

ko.validation.init({ errorElementClass: 'has-error', errorMessageClass: 'help-block', decorateInputElement: true });

我尝试使用上面的代码，但是没有用，它没有显示引导错误颜色。

最后，如何清除me.eventTypes observablearray？在我的解决方案中，每次调用模态时，下拉值都在重复。（对不起，我无法将其复制到jsfiddle）

非常感谢任何帮助和/或建议。谢谢！

Answer 1

我要（希望......）回答第一个和第三个问题;第二个似乎不是一个问题，如果只是小提琴不起作用。

问题1：

首先，您需要在viewmodel中添加一个额外的observable来跟踪所选类型。您可以在已正确实施的change方法中设置此类型。

me.selectedType = ko.observable(eventTypes[0]);

me.change = function(type, event) {
  me.selectedType(type);
};

现在，我们可以将<button>元素绑定到此selectedType，而不是硬编码文本和图标：

<button 
  class="btn btn-warning dropdown-toggle" 
  type="button" 
  data-toggle="dropdown" 
  data-bind="with:selectedType"> 

  <span data-bind="attr: {class: cls}"></span>
  <!-- ko text: label --><!-- /ko -->
  <span class="caret"></span>

</button>

请注意with数据绑定，它与您在foreach中使用的<ul>非常相似。

现在，如果您想为当前选定的元素设置不同的<li>样式，可以检查它们是否被选中：

$parent.selectedType() === $data

例如：

<li data-bind="style: { opacity: $parent.selectedType() === $data ? 0.5 : 1 }">

（最好创建一个计算的可观察isSelected并将其添加到type个对象中

我已经将这些更改包含在你的小提琴中：https://jsfiddle.net/oLm3yvLh/（请注意，你仍然可以移动一些东西;我没有阅读或触及你代码的大多数部分）

问题3：

我很难猜出什么是错的，但你可以通过两种方式清除一个可观察的数组：

使用新的空数组设置它：myObservableArray([])
从当前设置的数组中删除所有项目：myObservableArray.removeAll()

使用knockoutjs

1 个答案: