Knockout JS eşleme eklentisi

Question

kullanılarak oluşturulan görünüm modeline özellikler ekleme Knockoutjs web sitesinde eşleme eklentisi örneği üzerinde çalışıyorum.

Bu örnek verilerdir.

Knockout JS Mapping Plugin

var data = { 
    name: 'Scott', 
    children: [ 
     { id : 1, name : 'Alice' } 
    ] 
} 

örnek çocuklardan birine eşleşmesini geçersiz kılmak için ama nasıl taban nesnesi için eşleme değiştirmek nasıl gösterir.

Örneğin, Scott'a bir "FavouriteChild" mülkünü eklemek istedim, nasıl yapmalıyım?

Temel eşlemede oluşturma işlevini kullanmam gerektiğini varsayar, ancak sözdiziminin bir örneğini bulamıyorum.

var myChildModel = function(data) { 
    ko.mapping.fromJS(data, {}, this); 

    this.nameLength = ko.computed(function() { 
     return this.name().length; 
    }, this); 
} 

var mapping = { 
    'children': { 
     create: function(options) { 
      return new myChildModel(options.data); 
     } 
    } 
} 

var viewModel = ko.mapping.fromJS(data, mapping); 

DÜZENLEME: kabul edilen yanıt itibaren ben bu

<span data-bind='text: AdditionalProperty'> 

var mapping = { 
    create: function (options) { 
     //customize at the root level. 
     var innerModel = ko.mapping.fromJS(options.data); 

     innerModel.AdditionalProperty = 'Hello World'; 

     return innerModel; 
    } 
} 

var viewModel = ko.mapping.fromJS(data, mapping); 

//use this as our model bindings 
ko.applyBindings(viewModel); 

Answer 1

Sen haritalama nesnesinin kendisi bir create yöntemi kullanmak gerekir nakavt kodunu çalışmaya bulundu altına gibi:

var mapping = { 
    //customize at the root level. 
    create: function(options) { 
    //first map the vm like normal 
    var vm = ko.mapping.fromJS(options.data); 

    //now manipulate the returned vm in any way that you like 
    vm.someProperty = "test"; 

    vm.someComputed = ko.computed(function() { 
      return vm.first() + " " + vm.last(); 
    }); 

    //return our vm that has been mapped and tweaked 
    return vm; 
    } 
}; 

İşte

Answer 2

RP Niemeyer'ın çözümü

dayalı bu cevaba bir devamıdır burada yukarıda ve onun blogundan çözümü dayanmaktadır Bu cevap - Bunun için teşekkürler! Dizinin ilk düzey bir nesne olmadığı zaman ele aldığından bazı ayrıntılar eklemem gerektiğini düşündüm.

var data = { 
person: { 
     children: [{ id: 1, firstName: 'Scot', lastName: 'Weise'}] 
    } 
}; 

var mapping = { 
    'children': { 
     create: function(options) { 
      return (new (function() { 
       // setup the computed binding for some reason I had 
       // to use ko.dependentObservable instead of ko.computed 
       // or errors showed up. 
       this.fullName = ko.dependentObservable(function() { 
        return this.firstName() + ' ' + this.lastName(); 
        }, this); 
        ko.mapping.fromJS(options.data, { }, this); 
       })(/* call the ctor here */)); 
      } 
     } 
    }; 

    // Create view model and map the data object to the model. 
    var viewModel = ko.mapping.fromJS(data, {}); 

    // update the viewModel with the mapping object that contains 
    // some a computed property(s) 
    viewModel.person = ko.mapping.fromJS(viewModel.person, mapping); 
    ko.applyBindings(viewModel); 

Kişinin birinci düzey nesne olduğunu ve çocukların o kişinin bir alt özelliği olduğunu unutmayın. İlk bakışta hat viewModel.person = ko.mapping.fromJS (viewModel.person, mapping) benim için çekici değildi. Burada

Ve

kişi nesnesi başlangıçta sunucu json verilerinden oluşturulduktan sonra eklenen veya güncellenmesini gözlemlenebilir olan hafif varyasyon

olduğunu.

var viewModel = {}; 
$(document).ready(function() { 
    var person = getPerson(); 

    // selected person is added to the viewModel 
    viewModel.selectedPerson = ko.observable(person); 
    ko.applyBindings(viewModel); 
}); 

function getPerson() { 
// you would probably pass this into the function as a parameter. 
var person = 
    { 
     name: 'jim', 
     children: [{ id: 1, firstName: 'jane', lastName: 'bob'}] 
    }; 

    var mapping = { 
     'children': { 
      create: function (options) { 
       return (new (function() { 
        // setup the computed binding 
        this.fullName = ko.dependentObservable(function() { 
        return this.firstName() + ' ' + this.lastName(); 
        }, this); 
        ko.mapping.fromJS(options.data, {}, this); 
       })(/* call the ctor here */)); 
      } 
     } 
    }; 

    var result = ko.mapping.fromJS(person, mapping); 
    return result; 
} 

Sonuçta html Bazı bağlama kod, böyle bir noktada bazı kullanmak koymak gerekir:

<div data-bind="foreach:viewModel.selectedPerson().children"> 
    <span data-bind="text:fullName"></span> 
</div> 

Tanklarının! Yeni Blog yayınınız olmadan bu kadar uzak kalamadım.Bir çocuk ek bilgisayarlı gözlenebilirleri tanımlamak için

Answer 3

Not eşleme seçenekleri

var mapping = { 
    create: function(options) { 
    //customize at the root level. 

    var mapping2 = { 
     'children': { 
     create: function(options) { 
      //customize children also 

     } 
     } 
    } 

    //call ko.mapping.fromJS on the options.data as well with further customization 
    ko.mapping.fromJS(options.data, mapping2, this); 
    } 
}; 

Answer 4

Jason ve RP Niemeyer tarafından sağlanan örneklere dayanarak başka örnek başka bir set geçmesi gerekecektir.

data biz iç içe iki gözlenebilirleri (viewModel.weekly.selectedWeek ve viewModel.monthly.selectedMonth) ekleyin hangi bir ajax sorgusu sonrasında elde ediyoruz: açıklayan hakkında nasıl, boş fonksiyonu ile oluşturduğunuz kök erişme hakkında hiçbir şey gösterir nasıl

var data = { 
     "date": "2017-03-28", 
     "weekly": { 
      "weeks": [ 
       { 
        "id": "201701", 
        "label": "Week 1" 
       }, 
       { 
        "id": "201702", 
        "label": "Week 2" 
       } 
      ] 
     }, 
     "monthly": { 
      "months": [ 
       { 
        "id": "201701", 
        "label": "01/2017" 
       }, 
       { 
        "id": "201702", 
        "label": "02/2017" 
       } 
      ] 
     } 
    } 

    var viewModelMapping = { 
     create: function (options) { 
      return (new (function() { 
       // viewModel root level 
       var mapping2 = { 
        'weekly': { 
         create: function (options) { 
          // viewModel.weekly 
          return new function() { 
           var model = ko.mapping.fromJS(options.data, {}, this); 
           model.selectedWeek = ko.observable(); 
           return model; 
          }; 
         } 
        }, 
        'monthly': { 
         create: function (options) { 
          // viewModel.monthly 
          return new function() { 
           var model = ko.mapping.fromJS(options.data, {}, this); 
           model.selectedMonth = ko.observable(); 
           return model; 
          }; 
         } 
        } 
       }; 

       ko.mapping.fromJS(options.data, mapping2, this); 
      })()); 
     } 
    }; 


    var viewModel = ko.mapping.fromJS(data, viewModelMapping); 
    ko.applyBindings(viewModel);