1

オブジェクトのプロパティの初期値を入力するための選択を取得するのに問題があります。

のコレクションであるプロパティを持つLocationオブジェクトがありますurls。

{ id: 1, name: 'Location1', state: 'md', headline: 'headline1', urls: [{ id: 1, url: 'www.google.com', type: { id: 1, type: 'Public'} }]}

ユーザーが を選択すると、選択したオプションとしてリストLocationに表示しようとしていますが、常に.url.type.typeoptionsCaption

私のフィドルで完全な例を見つけてください

var seedData = [
    { id: 1, name: 'Location1', state: 'md', headline: 'headline1', urls: [{ id: 1, url: 'www.google.com', type: { id: 1, type: 'Public'} }]},
    { id: 2, name: 'Location2', state: 'va', headline: 'headline2', urls: [{ id: 1, url: 'www.bing.com', type: { id: 2, type: 'Private'} }]},
    { id: 3, name: 'Location3', state: 'md', headline: 'headline3', urls: [{ id: 1, url: 'www.yahoo.com', type: { id: 1, type: 'Public'} }]}
];

function UrlType(data) {
    this.id = ko.observable(data.id);
    this.type = ko.observable(data.type);
}

function Url(data) {
    this.id = data.id;
    this.url = ko.observable(data.url);
    this.type = ko.observable(new UrlType(data.type));
}

function Location(data, types, names) {
    var self = this;

    self.id = data.id;
    self.name = ko.observable(data.name).extend({ maxLength: 10, unique: { collection: names, externalValue: true } });
    self.state = ko.observable(data.state).extend({ pattern: '^[A-Za-z]{2}$'});
    self.headline = ko.observable();
    self.urls = ko.observableArray(ko.utils.arrayMap(data.urls, function(item) {
        return new Url(item);
    }));  
    self.errors = ko.validation.group(self);

    //update the data at any time
    self.update = function(data) {
        self.name(data.name);
        self.state(data.state);
        self.headline(data.headline);
        debugger;
        self.urls(ko.utils.arrayMap(data.urls, function(item){
            return new Url(item);
        }));
    };

    //initialize with our initial data
    self.update(data);
};

function ViewModel() {
    var self = this;

    self.types = [
        { id: 1, name: 'Public' },
        { id: 2, name: 'Private' }
    ];

    self.locations = ko.observableArray([]);   

    self.selectedLocation = ko.observable();
    self.selectedLocationForEditing = ko.observable();

    self.names = ko.computed(function(){
        return ko.utils.arrayMap(self.locations(), function(item) {
            return item.name();
        });
    });  

    self.edit = function(item) {
        self.selectedLocation(item);
        self.selectedLocationForEditing(new Location(ko.toJS(item), self.types, self.names()));
    };

    self.cancel = function() {
        self.selectedLocation(null);
        self.selectedLocationForEditing(null);
    };

    self.update = function(item) {
        var selected = self.selectedLocation(),
            updated = ko.toJS(self.selectedLocationForEditing()); //get a clean copy

        if(item.errors().length == 0) {
            selected.update(updated);
            self.cancel();
        }
        else
            alert("Error");        
    };

    self.locations(ko.utils.arrayMap(seedData, function(item) {
        return new Location(item, self.types);
    })); 
}

ko.applyBindings(new ViewModel());
4

1 に答える 1

0

ここに実用的なフィドルがあります：http://jsfiddle.net/jearles/2HS5J/5/

選択したオプションとしてそのプロパティだけをプルするように導入optionsValue: 'id'し、seedData をtype: 1(型オブジェクトではなく一意の ID) のみを含むように削減しました。これにより、ノックアウトはtypeを自分の の 1 つに簡単にマッピングできます$root.types(そうしないと、自分で行う必要があります)。さらに、配列に「タイプ」プロパティではなくプロパティを持つオブジェクトが含まれているoptionsText: 'type'場合に使用していました。これが、ノックアウトが選択にオプションを入力できなかった理由です。optionsname

于 2013-04-23T23:41:20.207 に答える