Knockout and bootstrap not binding

Question

I cannot get the value of my bound data-bind. When I try to read the value it is always undefined.

I have setup a fiddle here:

http://jsfiddle.net/tonymaloney1971/2qjhb5pw/5/

I think possibly the problem could be in the way I have setup the knockout binding:

$(document).ready(function () {
    var data = [{ PostCodeStart: "", PostCodeEnd: "", Mileage: "", Notes: ""     }];


        add: function () {
//this part is not working this.PostCodeStart() === "" 
            alert("How do I get the value of PostCodeStart");
            if (this.PostCodeStart() === "" || this.PostCodeEnd() === "" || this.Mileage() === "") {
                alert("empty field");
            }
            else
                this.journeyList.push({ PostCodeStart: this.PostCodeStart(), PostCodeEnd: this.PostCodeEnd(), Mileage: this.Mileage(), Notes: this.Notes() });
        },

Also, in my fiddle you will notice that a

dot is added each time I add a new row, how can I not display the

.

Thanks

Upvotes: 0

Views: 72

Answer 1

I've made a modified Fiddle that gets the data to your add and remove functions. As a general rule, you will not be using this to make knockout work. As a side-note, Douglas Crockford makes a fair case for never using this in his talk about class-free OOP.

Here's the relevant HTML:

                    <button class="btn-success img-rounded" data-bind="click:$root.add">
                        <span class="glyphicon glyphicon-plus-sign" style="text-align:right"></span>
                    </button>
                    <button class="btn-danger img-rounded" data-bind="click:$root.remove">
                        <span class="glyphicon glyphicon-remove"></span>
                    </button>

And the viewModel:

    var viewModel = {
        journeyList: ko.observableArray(data),
        add: function (data) {
            if (data.PostCodeStart === "" || data.PostCodeEnd === "" || data.Mileage === "") {
                alert("empty field");
            }
            else {
                viewModel.journeyList.push({ PostCodeStart: data.PostCodeStart, PostCodeEnd: data.PostCodeEnd, Mileage: data.Mileage, Notes: data.Notes });
            }
        },

        remove: function (data) {
            viewModel.journeyList.remove(data);
        }
    };

Updated: added style to the list to eliminate the bullets.

    <ul data-bind="foreach: journeyList" style="list-style-type:none">

http://jsfiddle.net/q6cjygy1/1/