2016-07-28 113 views
1

我想對我的應用進行性能優化。我遇到了以下問題。讓我有多個鍵(這是不是一個對象內改變)與此類似對象和視圖:針對對象屬性的角度一次性綁定

<div ng-if="vm.model"> 
    <span>{{ vm.model.property1 }}</span> 
    <span>{{ vm.model.property2 }}</span> 
    <span>{{ vm.model.property3 }}</span> 
</div> 

我本來想用一次性綁定我的財產,但如果我更改虛擬機.model在控制器內部通過引用傳遞給另一個對象,那麼我的表達式將不會在視圖內部更新,除非我將模型顯式更改爲falsy值並以某種方式觸發摘要循環,以強制刪除整個塊然後重新編譯。

有沒有一種方法可以避免讓這3個冗餘觀察者,因爲這些屬性不應該被監視,但只有父對象引用應該。

回答

0

https://docs.angularjs.org/guide/expression

根據我對你的問題的問題是不是與AngularJS相關的理解試試這個

<div ng-if="vm.model"> 
    <span>{{ ::vm.model.property1 }}</span> 
    <span>{{ ::vm.model.property2 }}</span> 
    <span>{{ ::vm.model.property3 }}</span> 
</div> 
+0

我已經提到,我不能在這裏使用一次性的綁定,並解釋了原因。如果我在示例鏈接函數中使用scope.vm.model = {...},那麼這些表達式將不會被更新。 –

0

@Alexey Katayev但其關於JavaScript如何與傳遞到參考點功能。

查看Is JavaScript a pass-by-reference or pass-by-value language?這個帖子和下面的簡單例子,我希望它能幫助你解決你的問題。

angular 
 
    .module('demo', []) 
 
    .controller('DefaultController', DefaultController); 
 
    
 
    function DefaultController() { 
 
    var vm = this; 
 
    vm.model = data[0]; 
 
    
 
    vm.changeModel = changeModel; 
 
    
 
    function changeModel(model) { 
 
     model.property1 = data[1].property1; 
 
     model.property2 = data[1].property2; 
 
     model.property3 = data[1].property3; 
 
    } 
 
    } 
 
    
 
    var data = [ 
 
    { property1: 'Property 1', property2: 'Property 2', property3: 'Property 3' }, 
 
    { property1: 'Property 4', property2: 'Property 5', property3: 'Property 6' }, 
 
    { property1: 'Property 7', property2: 'Property 8', property3: 'Property 9' } 
 
    ]; 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="demo"> 
 
    <div ng-controller="DefaultController as vm"> 
 
    <button type="button" ng-click="vm.changeModel(vm.model)">Change Model</button> 
 
    
 
    <div ng-if="vm.model"> 
 
     <span>{{ vm.model.property1 }}</span> 
 
     <span>{{ vm.model.property2 }}</span> 
 
     <span>{{ vm.model.property3 }}</span> 
 
    </div> 
 
    </div> 
 
</div>

+0

我的目標是減少觀察者的數量,這是如何在你的代碼中實現的?它看起來與我的例子相同 –

+0

正如你所說視圖中的表達式沒有更新......你是否將vm.model(作爲參數傳遞給)直接在函數中分配給另一個對象?像這樣https://jsfiddle.net/tkv1eodg/這將不會影響參數,如果vm.model直接在函數中使用,而不是作爲參數傳遞,它會更新視圖,請參閱https:// jsfiddle。 net/tkv1eodg/1 /或者如果參數的屬性正在更新,那麼視圖也會更新,如上面的嵌入代碼片段所示。 –