Question

我有一个模板绑定，如下所示：

    <div style="display: none;" data-bind="template: { name: 'info-window-template', data: currentPlace() }"></div>

    <script type="text/html" id="info-window-template">
    <div class="infobox">
        <h2 id="placeName">
            <a data-bind="data: name(), attr: { href: website() }"></a>
        </h2>
        <h4 data-bind="data: address()"></h4>
    </div>
    </script>

和

var places = [
    {
      name: "Austin Pizza Garden",
      address: "6266 Hwy 290 Austin, TX 78735",
      website: 'http://www.austin-pizza-garden.com',
    }...]

一个模特：

var Place = function(data) {
  this.name = ko.observable(data.name);
  this.address = ko.observable(data.address);
  this.website = ko.observable(data.website);
}

和ViewModel：

var ViewModel = function() {
  var self = this;
  self.placeList = ko.observableArray([]);
  places.forEach(function(placeItem) {
    self.placeList.push( new Place(placeItem) );
  });
  self.currentPlace = ko.observable( this.placeList()[0] );

输出可以找到name和address，但对于website，它会返回函数而不是url，因此链接不起作用。

当我在浏览器中运行时，我得到了这个：

<a href="function d(){if(0&lt;arguments.length)return d.Wa(c,arguments[0])&amp;&amp;(d.X(),c=arguments[0],d.W()),this;a.k.Ob(d);return c}">Austin Pizza Garden</a>

为什么knockout会返回函数而不是url的文本？为什么它适用于name和address，但不适用于website？如何让它返回url的文本？

如果你打开项目链接，你会看到来自html的第一个信息框div实际上工作得很好，但是为什么它在js中动态调用它会中断。

完整代码here：

Answer 1

您的代码有效。

var Place = function (data) {
    this.name = ko.observable(data.name);
    this.address = ko.observable(data.address);
    this.website = ko.observable(data.website);
};

var ViewModel = function (places) {
    var self = this;

    self.placeList = ko.observableArray([]);

    places.forEach(function (placeItem) {
        self.placeList.push(new Place(placeItem));
    });

    self.currentPlace = ko.observable(this.placeList()[0]);
};


var places = [{
    name: "Austin Pizza Garden",
    address: "6266 Hwy 290 Austin, TX 78735",
    website: 'http://www.austin-pizza-garden.com'
}];

var vm = new ViewModel(places);

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div data-bind="template: { name: 'info-window-template', data: currentPlace }"></div>

<script type="text/html" id="info-window-template">
  <div class="infobox">
    <h2 id="placeName">
      <a data-bind="text: name, attr: { href: website }"></a>
    </h2>
    <h4 data-bind="text: address"></h4>
  </div>
</script>

但是，您可能希望使用text绑定。没有data绑定。（提示：如果您使用真实代码中的text绑定，请在下次发布真实代码，而不是您刚刚组成。）

您也不需要使用任何括号。 Knockout在数据绑定期间为您自动解包任何可观察对象。

但是，如果您将function d(){...视为任何数据绑定属性的值，那么您正在查看错误地包含在可观察对象中的可观察对象。在这种情况下，您应该检查您的viewmodel构建过程，以确保任何y中的this.x = ko.observable(y)都不会被观察到。

Answer 2

尝试删除括号

    <script type="text/html" id="info-window-template">
<div class="infobox">
    <h2 id="placeName">
        <a data-bind="data: name, attr: { href: website }"></a>
    </h2>
    <h4 data-bind="data: address"></h4>
</div>
</script>

Knockout JS模板attr href绑定返回函数而不是value

2 个答案: