How to refer Knockout.js objects and array of objects in right context

Question

I can´t seem to get this right: http://jsfiddle.net/dPyQy/4/

I want to collect the tags I am entering in the input field for saving. I need to reference the Textbatches as a SelectedText as in RL I need to be able to choose among Textbatches.

var Textbatch = function (data,tags) {
    var self = this;

    self.TextbatchId = data.TextbatchId;
    self.Title = ko.observable(data.Title);
    self.Text = ko.observable(data.Text);
    self.TextTags = ko.observableArray(tags);

    function createTypeComputed(tagType) {
        return ko.computed(function () {
            return ko.utils.arrayFilter(self.TextTags(), function (item) {
                return item.Type() == tagType;
            });
        });
   }

   self.managerTags = createTypeComputed(0);

   self.removeTag = function (tagToRemove) {
       self.TextTags.remove(function (item) {
           return item.Id == tagToRemove.Id;
       });
   }
}

Struggling with the contexts and the objects and everything. I want the chosen tags listed beneath the input-field, and then the debug to show the updated object.

Any help highly appreciated. Thanx.

ebohlman · Accepted Answer · 2014-01-13 20:51:49Z

1

managerTags evaluates to an array, but you're using it in a text binding which is expecting it to evaluate to a string.

How do you want to display it? As an HTML list (use a foreach binding to loop over the tags), or as a comma (or something)-separated string (use join on it)?

To get a comma-separated string, change createTypeComputed to

function createTypeComputed(tagType) {
  return ko.computed(function () {
    return ko.utils.arrayMap(      
      ko.utils.arrayFilter(self.TextTags(), function (item) {
         return item.Type() == tagType;
      }),
      function (item) {
        return item.Name();
      }).join(',');
    });
}

Note that if you can count on using an ES5 browser (anything but IE<9) you can simplify the function for the computed to

    return self.TextTags().filter(function (item) {
        return item.Type() == tagType;
      })
      .map(function (item) {
        return item.Name();
      })
      .join(',');

edited Jan 13, 2014 at 20:51

answered Jan 11, 2014 at 23:42

ebohlman

15k5 gold badges35 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Asle G Over a year ago

I´d like a comma-separated string.

ebohlman Over a year ago

So modify your computed to return a string by using the filtered array's join method.

Asle G Over a year ago

Sorry, I cannot see that (alone at least) helping. Can you be more specific?

Asle G Over a year ago

Thanx. I have included that in an updated fiddle jsfiddle.net/dPyQy/5 , but still I have the same problems with printing out the managerTags (see "Local managers"-string and second debug-string in fiddle.

ebohlman Over a year ago

My mistake: forgot to extract the Name field from the objects; see updated answer.

|

Collectives™ on Stack Overflow

How to refer Knockout.js objects and array of objects in right context

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related