javascript - ノックアウトJShtmlバインディングがhtml文字列の代わりに奇妙なコードを返す

Question

function tournamentViewModel(){
    var self= this;
    self.name = ko.observable();
    self.districts = ko.observableArray([new district('Provo',1),new district('Salt Lake City',2),new district('St. George',3)]);
    self.district = ko.observableArray();
    self.regions = ko.observableArray([new region('Utah',1),new region('Idaho',2)]);
    self.region = ko.observableArray();
    self.location = ko.observable();
    self.date = ko.observable();
    self.startTime = ko.observable();
    self.image = ko.observable();
    self.flyer = ko.computed(function(){return '<h1>'+self.name+'</h1>'+self.image},self);
    self.clearImage = function(){
        self.image(''); 
    }
    self.tournamentID = ko.computed(function(){return 't_'+self.district+'_'+self.region+'_'+self.date}, self);
};

上記のknockout.jsビューモデルは、計算されたobservableに何かをバインドする場合を除いて、問題ないようですflyer。代わりに、私が見るのは次のテキストだけです。

<h1>function c(){if(0<arguments.length){if(!c.equalityComparer||!c.equalityComparer(d,arguments[0]))c.I(),d=arguments[0],c.H();return this}a.U.La(c);return d}</h1>function c(){if(0<arguments.length){if(!c.equalityComparer||!c.equalityComparer(d,arguments[0]))c.I(),d=arguments[0],c.H();return this}a.U.La(c);return d}

ここで何が起こっているのかわかりません。以下は、私が適用しているバインディングです。HTMLとテキストの両方のバインディングを試しました。

<span data-bind="text: flyer"></span>

ところで、計算されたオブザーバブルtournamentIDはうまく機能し、構文は同じように見えます。self.name計算されたオブザーバブルで使用すると問題が発生すると思います。何か案は？

Answer 1

考えてみてください。何がもらえますか？関数定義を取得します。関数をに渡したからですcomputed。そして、値を渡す必要があります。次を使用する必要があります。

self.flyer = ko.computed(function(){
    return '<h1>'+self.name()+'</h1>'+self.image();
});

nameとは両方とも監視可能であるためimage（JavaScriptの観点から：関数）。

なぜtournamentIDあなたのために働いているのかわかりません。すべきではありません。

ところでvar self = this;、を使用している場合は、の2番目の引数を省略できますcomputed。

Answer 2

これを試して

<span data-bind="text: flyer()"></span>