aurelia屬性觀察從父母綁定的對象

我有一個關於aurelia的問題。比方說，我有一個產品類，這個產品有標籤。一個具體的例子：一件襯衫是一種產品，它有一些標籤用戶可以在這樣的查詢爲男性，XL，藍色等。他們JSON表示就像aurelia屬性觀察從父母綁定的對象

{ 
    "id": 3, 
    "name": "Shirt", 
    "sku": "WCZR-1", 
    "tags": [ 
    { 
     "id": 1, 
     "name": "XL" 
    }, 
    { 
     "id": 2, 
     "name": "Blue" 
    } 
    ] 
}

如果管理員正在尋找的詳細視圖本產品可以編輯標籤，S \他將尋找一個觀點如下：

<div class="form-group"> 
       <label>SKU</label> 
       <input type="text" value.bind="item.sku"> 
</div> 
<div class="form-group"> 
    <label>Tags</label> 
     <tag-manager item.bind="item"></tag-manager> 
</div>

注意，我還有一個自定義元素稱爲<tag-manager>，這是產品的細節元素的子元素。正如你可能已經猜到了，它暴露了其出口可綁定對象：@bindable item = null;

這樣，父元素通過在產品中的子元素，這裏的管理員可以添加\使用此標籤管理器刪除標籤。要讓管理員能夠編輯標籤，他需要點擊編輯按鈕。這會將項目置於編輯模式。父元素（產品詳細信息元素）通過在用戶單擊編輯按鈕時向產品添加InEditMode屬性來實現。

enterEditMode(){ 
    this.item.inEditMode = true; 
    this.savedItem = JSON.parse(JSON.stringify(this.item)); 
}

請注意，inEditMode屬性不是來自Web API，它是動態添加的。

現在，這主要起作用，當產品處於編輯模式時，子元素（標籤管理器）可以從產品中添加\刪除標籤，父母和孩子都會看到產品標籤集合已被修改。從標籤管理器示例代碼：

removeTag(tag){ 
    this.item.tags = this.item.tags.filter(function(el){ 
     return el.id !==tag.id; 
    }) 
} 

addTag(tag){ 
    this.item.tags.push(tag); 
}

這些功能的工作和修改的項目的標籤採集成功，一兩件事，不工作是product.InEditMode財產。當父元素（詳細視圖將產品置於編輯模式時，標籤管理器僅對視圖激活進行識別，但未初始化加載後在父級上單擊編輯|取消並更改父級中的inEditMode屬性所以雖然產品的標籤屬性被觀察到，但是inEditMode屬性並沒有被孩子觀察到，如果我將觀察者定位器導入到aurelia中並觀察屬性，它沒有什麼區別。代碼：

import {ObserverLocator} from 'aurelia-framework'; 

    var subscription = this.observerLocator 
     .getObserver(this.product, 'inEditMode') 
     .subscribe(this.onChange); 
    } 
     onChange(newValue, oldValue) { 
     //this method is called only once at the activation of the child, 
     //no clicks in the parent can trigger this method again 
     }

正如在評論中看到，onChange方法上激活調用一次;激活後，父（編輯，取消編輯）沒有點擊會反映在子元素和的onChange贏得」再次調用

我能通過使用eventAggregator得到這個工作，但我真的很想知道爲什麼我無法觀察父對象的bool屬性。我不想濫用eventAggregator而不理解後面的內容。場景。任何線索將不勝感激！

編輯：

此問題的plunker是

http://plnkr.co/edit/0gMZFhtKA2r6nec9kGUC?p=preview。

與我所看到的略有不同的問題，但子視圖仍然不能反映父視圖模型的更改。

來源

2015-12-21 freud

對不起，我不明白你在問什麼。你能簡單地總結一下你的問題嗎？ –

如果您有兩個自定義元素，其中element1是element2的父元素，那麼這兩個元素都可以訪問數據對象的同一個實例（因爲它由綁定裝飾器綁定到兩個元素），所以您如何觀察變化此數據對象的屬性不使用事件聚合器？ – freud

你描述的代碼應該可以正常工作。我在我的應用程序中添加了類似的東西，它可以工作。您在命名（item/product，InEditMode/inEditMode）方面存在一些不一致 - 它只是在問題中還是在代碼中？你在哪裏調用訂閱 - 在bind（）函數中？無論如何，我建議你做一個可運行的plunkr來說明你的問題。 – Mikhail

我建議稍微不同的方法，使用BindingEngine：

@bindable product; 
productChanged(newValue, oldValue) { 
    if (this.inEditModeSubscription) { 
    this.inEditModeSubscription.dispose(); 
    this.inEditModeSubscription = null; 
    } 
    if (newValue) { 
     this.inEditModeSubscription = this.bindingEngine 
      .propertyObserver(newValue, "inEditMode") 
      .subscribe(this.onEditModeChanged); 
    } 
} 
inEditModeSubscription = null;

添加從內productChanged確保你不小心觀察者添加到null或undefined對象的屬性，觀察員product.inEditMode，和只要您的product設置爲不同的對象，它就會刷新訂閱。

這可確保您的onEditModeChanged在屬性更改時始終被觸發。

來源

2016-09-28 16:12:03

aurelia屬性觀察從父母綁定的對象

回答

相關問題