3

所以这就是我想要做的

使用敲除我想要一些只在变量 myvalue 有一些内容时出现

这是我的代码

html

<script type='text/javascript' src="../js/knockout-2.3.0.js" defer="defer"></script>
<script type="text/javascript" src="../js/searchModel.js" defer="defer" ></script>

<h2>Welcome to My World :D</h2>

<div data-bind="visible: myValues().length > 0">
    You will see this message only when 'myValues' has at least one member.
</div>

JS

function helloModel() {
// Editable data
this.viewModel = {
    myValues: ko.observableArray([]) // Initially empty, so message hidden
   };
  //viewModel.myValues.push("some value"); // Now visible
}

我总是得到的错误是：

Uncaught ReferenceError: Unable to parse bindings.
Bindings value: visible: myValues().length > 0
Message: myValues is not defined

很可能是因为我添加到脚本标签的属性 defer，这意味着在我渲染整个 html 元素之前不会加载文件

然而，这很重要，我将在以下三种情况下进行解释：

1-推迟淘汰赛而不是搜索模型如下

所以现在搜索模型将在渲染 HTML 元素之前包含在内。但是，这会导致问题，因为它使用 knokout 的代码

Uncaught ReferenceError: ko is not defined

2-推迟搜索模型而不是淘汰赛

<script type='text/javascript' src="../js/knockout-2.3.0.js" defer="defer"></script>
<script type="text/javascript" src="../js/searchModel.js" ></script>

会导致同样的老问题

Uncaught ReferenceError: Unable to parse bindings.
Bindings value: visible: myValues().length > 0
Message: myValues is not defined

3-忘记延迟

<script type='text/javascript' src="../js/knockout-2.3.0.js" ></script>
<script type="text/javascript" src="../js/searchModel.js" ></script>

还会导致以下问题 Uncaught TypeError: Cannot read property 'nodeType' of null

因为脚本将加载到 html 上并尝试在创建元素之前绑定元素

那么你有什么建议来解决这个问题:)

4

2 回答 2

3

这应该与您发布的代码一起使用。

<h2>Welcome to My World :D</h2>

<div data-bind="visible: myValues().length > 0">
    You will see this message only when 'myValues' has at least one member.
</div>

<script type='text/javascript'>
  ko.applyBindings((new helloModel()).viewModel)
</script>

我建议重构您的视图模型，使其看起来像这样

function helloModel() {
    var self = this;
    self.myValues = ko.observableArray([]);
    self.pushHello = function(data,e) {
       self.myValues.push("Hello, world!");
    };
    //self.myValues.push("some value"); // Now visible
}

然后在你的初始化代码中

<script type='text/javascript'>
  ko.applyBindings(new helloModel())
</script>
于 2013-08-02T18:41:51.437 回答
0

您有几个选择 -

就像评论中提到的那样，您可以使用 with 绑定，但在这种情况下更典型的是 foreach。

做你想做的事情的最简单的方法之一是当你的 myValues observableArray 为空时有一个替代方案 -

<!-- ko if: !myValues().length -->
    <span>There is no data yet</span>
<!-- /ko -->
<!-- ko if: myValues().length -->
    <p>The length of myValues is - <span data-bind="text: myValues().length"></span></p>
<!-- /ko -->

http://jsfiddle.net/eVcDR/

当然，如果您删除第一个无容器绑定，它将与您正在寻找的效果相同，只是不会验证数组是否为空。

于 2013-08-02T17:04:51.687 回答