Knockout js - &&如果條件和無容器綁定

我正在顯示項目列表，如果項目不可用我必須顯示默認消息。現在，我必須檢查對象是否已經創建，然後檢查對象是否有列表。Knockout js - &&如果條件和無容器綁定

所以，現在我正在做下面的工作，它會創建不必要的dom元素。但是，當我做的無容器結合它似乎並沒有工作一樣，也有一個& &語法如果KO

<span data-bind="if: object"> 
    <span data-bind="if: !object().property"> 
     <p> The list is not available </p> 
    </span> 
</span> // Works 

<!-- ko if: object --> 
    <!-- ko if: !object().property --> 
      <p> The list is not available </p> 
    <!-- /ko --> 
<!-- /ko --> // Doesn't work

感謝

來源

2013-05-04 Ashwin

因此，「對象」是一個功能？調用時返回一個對象的函數？如果不是，那麼'object（）。property'不正確。 – Pointy 2013-05-04 14:49:21

這兩個版本都應該和以下版本一樣：http://jsfiddle.net/sAkb4/。所以你在別處有你的問題...你應該嘗試在jsfiddle中重現你的問題... – nemesv 2013-05-04 15:07:29

是的，我的問題是，當dom加載不可用的列表時，即使列表可用，因爲對象計算結束.. – Ashwin 2013-05-04 15:34:28

正如你所看到的，元素存在在DOM中，並且在ko.applyBindings調用完成之前它不會被刪除。因此，此消息的瞬間顯示。

我想嘗試隱藏DOM的整個部分，而不是顯示加載指示器。當ko/ajax完成後，可以刪除加載指示符並顯示您關心的標記。

或者，您可以看到您的網頁是否需要一段時間才能加載並嘗試改善網頁的加載時間。鉻剖析工具可以幫助解決這個問題。

來源

2013-05-04 17:10:49 CodeThug

如果ko/ajax完成了，你如何傳遞值？因爲該對象存在，它需要一點點，因爲它填充屬性是一個數組...這就是它顯示了片刻的原因..我想知道是否所有的操作完成，然後顯示此消息.. – Ashwin 2013-05-05 01:59:02

我有點困惑......你能展示什麼對象和屬性是這樣我們可以有一個更好的想法這些對象是什麼樣子？ – CodeThug 2013-05-06 01:50:23

嘿，這是解釋..對象包含一個數組，數組項目由ajax調用..現在，當ajax調用返回項目顯示項目列表，如果沒有返回說「沒有返回」.. ..但是，因爲當加載ajax調用仍然發生的DOM顯示「沒有返回」一段時間...我如何使DOM等待ajax調用完成，然後顯示.. – Ashwin 2013-05-06 14:35:51

正如CodeThug所述，使用您提供的解決方案將顯示消息，直到ko.applyBindings完成。一個更詳細的解決方案，但會避免這個問題，而不依賴於CSS，是使用動態模板，如圖下面的jsfiddle：

http://jsfiddle.net/sAkb4/1/

這將創建一個虛擬元素中的有效標記，只有當ko.applyBindings完成。

<!-- ko template: { name: dinamycList } --> 
<!-- /ko --> 

<script type="text/html" id="empty-template"> 
    ... list is NOT available markup ... 
</script> 

<script type="text/html" id="list-template"> 
    ... list is available markup ... 
</script>

被dinamycList返回根據你想爲一個有效的清單驗證的模板的名稱的函數。

編輯：

讀通過你的最後的評論讓我覺得如果你想要的行爲是顯示「未繳費模板」只計算列表後該屬性是假的，如果多數民衆贊成的情況下，跟隨小提琴將修復最後一個提供正確的條件。

http://jsfiddle.net/sAkb4/3/

的「如果」，在模板狀態將處理後瞬間的淘汰賽已經準備就緒，但名單是之前。如果條件太混亂，我會建議將它放入ko.com進行明確標記。

<!-- ko template: { name: dinamycList, if: object() !== undefined && object().property !== undefined } --> 
<!-- /ko -->

來源

2013-05-04 23:35:29

隨着解決方案，它也做了同樣的事情，如果我沒有錯。最初模板顯示，然後它改變......但我的問題是，該屬性是一個數組，它需要很少的時間來填充它。當對象可用它顯示消息.. – Ashwin 2013-05-05 01:55:47

正如小提琴所示，此解決方案在創建對象之前不會顯示任何內容，然後在「將對象的屬性設置爲true」，然後顯示「可用標記」時顯示「不可用標記」。 – 2013-05-05 13:52:14

我認爲問題可能存在於顯示每個模板不太清晰的條件中。你能否澄清每個模板何時可見？ – 2013-05-05 14:00:10

這是很容易與我的約定優於配置的lib

http://jsfiddle.net/VVb4P/

僅此的lib會做templatating你

this.items.subscribe(function(items) { 
     if(items.length === 0) { 
      this.items.push(new MyApp.EmptyViewModel()); 
     } 
    }, this);

來源

2013-05-06 07:09:41 Anders

Knockout js - &&如果條件和無容器綁定

回答

相關問題