Создание псевдонима в нокауте?

Question

Время от времени у меня есть элементы из модели просмотра, к которой я обращаюсь несколько раз в представлении, и я хотел бы иметь возможность назначить псевдоним из контекста представления, чтобы сократить его.

Я искал что-то, что было бы похоже на foreachas псевдонима или with, но что я могу использовать на одном произвольном доступе.

В качестве примера, в следующем я мог бы псевдоним $root.form().budget.budgetEndDate для endDate

<input id="foo" type="text" data-bind="dateTimePicker: $root.form().budget.budgetEndDate" /> 

Тогда я мог бы переписать связывание в

<input id="foo" type="text" data-bind="dateTimePicker: endDate" /> 

Answer 1

два варианта.

Во-первых, для демонстрационных целей весьма рекомендуется только, но не так, вы ульд загрязнять глобальное пространство имен:

function Root() { 
 
    this.form = ko.observable(new Form()); 
 
} 
 

 
function Form() { 
 
    this.budget = { 
 
    budgetEndDate: ko.observable("dummy budget end date") 
 
    }; 
 
    
 
    window["endDate"] = this.budget.budgetEndDate; 
 
} 
 

 
ko.applyBindings(new Root());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> 
 
<div> 
 
    endDate outside form: <b data-bind="text: endDate"></b> 
 
</div> 
 
<div data-bind="with: form"> 
 
    <div>inside form: <b data-bind="text: endDate"></b></div> 
 
    <div data-bind="with: budget"> 
 
    <div>inside form.budget: <b data-bind="text: endDate"></b></div> 
 
    </div> 
 
</div>

Во-вторых, вы можете поместить его на $root:

function Root() { 
 
    this.form = ko.observable(new Form()); 
 
    
 
    this.endDate = this.form().budget.budgetEndDate; 
 
} 
 

 
function Form() { 
 
    this.budget = { 
 
    budgetEndDate: ko.observable("dummy budget end date") 
 
    }; 
 
} 
 

 
ko.applyBindings(new Root());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> 
 
<div> 
 
    endDate outside form: <b data-bind="text: $root.endDate"></b> 
 
</div> 
 
<div data-bind="with: form"> 
 
    <div>inside form: <b data-bind="text: $root.endDate"></b></div> 
 
    <div data-bind="with: budget"> 
 
    <div>inside form.budget: <b data-bind="text: $root.endDate"></b></div> 
 
    </div> 
 
</div>

Однако, по субъективной ноте, я бы подумал об этом запахе дизайна и/или о проблеме XY. Место, которое вы связываете с budgetEndDate, вероятно, должно быть правильным контекстом/представлением для доступа к нему напрямую. Вы должны рассмотреть возможность перемещения, которое можно наблюдать в другой части вашей модели представления.