ノックアウトJSインライン・ターナーリ

Question

データが空であるかどうかを確認してから、データまたはメッセージを表示しています。

テキストを表示し、末尾に省略記号を追加する次のコードがあります。

<p data-bind="text:$data['Preview Text'] + '...'"></p> 

理想的には、これはpreview textをチェックすると、存在しない場合は、それは代わりに別のメッセージを返します。私はこれを起こすことに行きましたが、私はそれを働かせることができません。

<p data-bind="text: preview() ? $data['Preview Text'] + '...' : 'aaaaaaaa'"></p> 

Answer 1

私の最初のアドバイスは、このロジックをデータバインドに配置するのではなく、あなたのviewmodelに配置することです。デバッグしやすく、変更も簡単で、HTMLを読みやすくします。

私はあなたのプレビューテキストを保持する観測可能な文字列があると仮定していますが、空であっても構いません。

ラベルを生成するには、ko.computedObservableまたはko.pureComputedを使用することができます。これは、次のときに実際のJavaScriptモデルを表示するのに役立ちます。例：

var originalLabel = ko.observable("A label"); 
var displayLabel = ko.pureComputed(function() { 
    return originalLabel() ? originalLabel() + "..." : "No Label"; 
}); 

displayLabelアップデートたびoriginalLabelアップデート。元のラベルが空の場合、デフォルトのテキスト"No Label"が返されます。元のラベルが空でない場合は、"..."が追加されます。

実施例：

var VM = function() { 
 

 
    this.originalLabel = ko.observable("Initial Text"); 
 
    this.displayLabel = ko.pureComputed(function() { 
 
    var originalLabel = this.originalLabel(); 
 
    return originalLabel ? originalLabel + "..." : "No label set"; 
 
    }, this); 
 
}; 
 

 
ko.applyBindings(new VM());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 

 
<input type="text" data-bind="value: originalLabel, valueUpdate: 'keyup'" /> 
 

 
<div>Generated value: <strong data-bind="text: displayLabel"></strong> 
 
</div>