Knockout.js Выберите значение привязки к объекту - PullRequest
Новая
       16

Knockout.js Выберите значение привязки к объекту

1 голос
/ 23 марта 2012

Мне не удается привязать список выбора Knockout при использовании объекта в качестве значения списка выбора. Он отлично работает, если я использую строку, но я хочу связать объекты.

У меня есть объект Gift, и у него есть Название, Цена и Компания. У меня есть список избранных компаний, и у каждой компании есть идентификатор и имя. Первоначальный выбор, однако, не является правильным в списке выбора.

Пожалуйста, смотрите скрипку: http://jsfiddle.net/mrfunnel/SaepM/

Это важно для меня при привязке к моделям вида MVC3. Хотя я признаю, что это может быть потому, что я делаю вещи неправильно.

Если у меня есть следующая модель: 

public class Company
{
    public Guid Id { get; set; }
    public string Name { get; set; }

}
public class GiftModel
{
    public Company Company { get; set; }
    public string Title { get; set; }
    public double Price { get; set; }
}

Как выбрать компанию, которую можно привязать к моему контроллеру? Нужно ли добавить свойство CompanyId в GiftModel и привязать к нему или написать пользовательское связующее. Я что-то упустил здесь?

Заранее спасибо.

Ответы [ 2 ]

5 голосов
/ 29 апреля 2012

Тебе нужно много чего сделать.

CompanyId в вашей ViewModel - это единственный способ связать и сделать это видимым. Вы не можете сделать объект наблюдаемым, только его значения 

<form class="giftListEditor" data-bind="submit: save">
    <!-- Our other UI elements, including the table and ‘add’ button, go here -->

    <p>You have asked for <span data-bind="text: gifts().length">&nbsp;</span> gift(s)</p>
    <table>
        <tbody  data-bind="foreach: gifts">
            <tr>
                <td>Gift name: <input data-bind="value: Title"/></td>
                <td>Price: $ <input data-bind="value: Price"/></td>
                <td>Company: <select data-bind="options: $root.companies, optionsText: 'Name', optionsValue: 'Id', value: CompanyId"/></td>
                <td>CompanyId: <span data-bind="text: CompanyId"></span></td>
                <td><a href="#" data-bind="click: $root.removeGift">Delete</a></td>
            </tr>
        </tbody>
    </table>
    <button data-bind="click: addGift">Add Gift</button>
    <button data-bind="enable: gifts().length > 0" type="submit">Submit</button>
</form>​

ваша модель 

// Fake data
var initialData = [
    { Title: ko.observable('Item 1'), Price: ko.observable(56), CompanyId: ko.observable(1) },
    { Title: ko.observable('Item 2'), Price: ko.observable(60), CompanyId: ko.observable(2) }, 
    { Title: ko.observable('Item 3'), Price: ko.observable(70), CompanyId: ko.observable(2) }
];

var initialCompanies = [
    { Id: 1, Name: "Comp 1" },
    { Id: 2, Name: "Comp 2" },
    { Id: 3, Name: "Comp 3" }
];

var viewModel = {
    gifts: ko.observableArray(initialData),
    companies: initialCompanies,

    addGift: function() {
        this.gifts.push({
            Title: "",
            Price: "",
            Company: { Id: "", Name: "" }
        });
    },
    removeGift: function($gift) {
        viewModel.gifts.remove($gift);
    },
    save: function() {
        console.log(ko.toJS(viewModel.gifts));
    }
};

ko.applyBindings(viewModel, document.body);​
0 голосов
/ 30 августа 2013

Чтобы сделать объект видимым, используйте привязку foeach.Если у вас есть такой сценарий: 

var model = {
    myObj : ko.observable();
}

, если вы попытаетесь привязать к myObj.label, он не будет работать: 

<span><a href="#" data-bind="text: myObj.label"></a></span>

однако, используя привязку foreach: 

<span data-bind="foreach: myObj"><a href="#" data-bind="text: label"></a></span>

КО перебирает свойства, как если бы он проходил через массив обычным способом JavaScript, и все будет работать.

...