knockout "with" binding: each property to multiple controls

Question

Within "with" binding div, I tried to bind 5 properties of a model to 2 different types of controls, namely textbox and label. However, only the first property on the list is bound to two controls, the rest are only bound to textbox:

    <div data-bind="with: RetrieveObject">
      <input type= "text" data-bind="value: property1" /> <br />
      <input type= "text" data-bind="value: property2" /> <br />
      <input type= "text" data-bind="value: property3" /> <br />
      <input type= "text" data-bind="value: property4" /> <br />
      <input type= "text" data-bind="value: property5" /> <br />
      <label data-bind="text: property1" /> <br />
      <label data-bind="text: property2" /> <br />
      <label data-bind="text: property3" /> <br />
      <label data-bind="text: property4" /> <br />
      <label data-bind="text: property5" /> <br />
    </div>

Object is populated dynamically, meaning its properties are assigned dynamically. In my view model, I have Object = ko.observable() . And once user clicked some button, I have Object(createModel1()) executed, where createModel1 returns a new Model1. Model1 has properties defined as ko.observable.

I don't know whether this is not supposed to work or am I doing something else wrong (barking at the wrong tree)

Please help! Thank you!!!

    //In my viewmodel file I have the following
        window.testApp.ViewModel = (function (ko, datacontext) {
            var searchKey1 = ko.observable(),
                searchKey2 = ko.observable(),
                RetrievedObject = ko.observable(),
                CreatedObject = ko.observable(),
                error = ko.observable(),
                findObject = function () {
                datacontext.findObject(CreatedObject, RetrievedObject, searchKey1 , searchKey2, error);}
            return {
                searchKey1: searchKey1,
                searchKey2: searchKey2,
                RetrievedObject: RetrievedObject,
                CreatedObject: CreatedObject,
                error: error,
                findObject: findObject
            };

        })(ko, testApp.datacontext);
ko.applyBindings(window.testApp.ViewModel);

    //In my datacontext file, I have the following

        window.textApp = window.testApp || {};

        window.textApp.datacontext = (function () {

            var datacontext = {
                findObject: findObject,
            };

            return datacontext;

            function findObject(createdObjectObservable, retrievedObjectObservable, searchKey1Observable, searchKey2Observable, errorObservable) {
                return ajaxRequest("get", findObjectUrl(searchKey1Observable, searchKey2Observable))
                    .done(getSucceeded)
                    .fail(getFailed);

                function getSucceeded(data) {
                    var retrievedObject = new datacontext.retriveObject(data);
                    retrivedObjectObservable(retrivedObject);
                    createdObjectObservable(datacontext.createObject(policyInfo));
                }

                function getFailed() {
                    errorObservable("Invalid Policy Number or Location Zip Code.");
                }
            }
            function createObject(retrivedObject) {
                return new datacontext.createdObject(retrivedObject);
            }
        //private
            function clearErrorMessage(entity) { entity.errorMessage(null); }
            function ajaxRequest(type, url, data, dataType) { // Ajax helper
                var options = {
                    dataType: dataType || "json",
                    contentType: "application/json",
                    cache: false,
                    type: type,
                    data: data ? data.toJson() : null
                };
                var antiForgeryToken = $("#antiForgeryToken").val();
                if (antiForgeryToken) {
                    options.headers = {
                        'RequestVerificationToken': antiForgeryToken
                    }
                }
                return $.ajax(url, options);
            }
            // routes
             function findObjectUrl(key1, key2) { return "/api/Stuff/GetStuff/?Key1=" + (key1() || "") + "&key2=" + (key2() || ""); }

        })();

//in my models file, I have following:
(function (ko, datacontext) {
    datacontext.createdObject = createdObject
    datacontext.retrievedObject = retrievedObject;

    function createdObject(data) {
        var self = this;
        data = data || {};
        self.property1 = ko.observable(data.property1);
        self.property2 = ko.observable(data.property2);
        self.property3 = ko.observable(data.property3);
        self.property4 = ko.observable(data.property4);
        self.property5 = ko.observable(data.property5);
        self.property6 = ko.observable();
        self.property7 = ko.observable();
        self.property8 = ko.observable();       
        self.errorMessage = ko.observable();
        self.toJson = function () { return ko.toJSON(self) };
    };

    function retrievedObject(data) {
        var self = this;
        data = data || {};
        self.property1 = ko.observable(data.property1);
        self.property2 = ko.observable(data.property2);
        self.property3 = ko.observable(data.property3);
        self.property4 = ko.observable(data.property4);
        self.property5 = ko.observable(data.property5);
        self.errorMessage = ko.observable();
        self.toJson = function () { return ko.toJSON(self) };
    };
})(ko, testApp.datacontext);

Answer 1

The problem is just that HTML label element requires an end tag. In other words the following is not valid:

<label data-bind="text: property1" /> 

It should be

<label data-bind="text: property1" ></label> 

Also the HTML has a spelling error on the with statement. It should be "RetrievedObject".