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

Knockout JS template attr href binding returning function instead of value

本文关键字：函数 返回 绑定 JS 模板 attr href Knockout      更新时间：2023-09-26

我有一个模板绑定，看起来像这样:

    <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',
    }...]

And a Model:

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的文本?

如果你打开项目链接，你会看到第一个信息框div从html实际上工作完美，但这就是为什么它在js中被动态调用，它打破。

完整代码在这里:

你的代码工作了。

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绑定。(提示:如果你的在你的real代码中使用了text绑定，那么下次发布你的real代码，而不是你自己编的。)

也不需要使用圆括号。Knockout在数据绑定期间自动为您展开所有可观察对象。

然而，如果你看到function d(){...作为任何数据绑定属性的值，那么你看到的是一个错误地包装在一个可观察对象中的可观察对象。在这种情况下，您应该检查视图模型构建过程，以确保任何this.x = ko.observable(y)中没有y本身已经是可观察的。

尝试删除括号

    <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>
相关文章：