knockout template observable not working when passing value to inner template

Question

I am rendering a template that accepts an observable array and inside, it uses an inner template to render the content of a property as input text. If I directly render input text in the "foreach" in the parent then any changes to the text are two-way binding and reflected in the related observable array item property but when using the inner template it becomes one way.

--========== Parent template =======--

  <div class="skill-rating-section" data-bind="foreach: { data: skills, as: 'skill' }">
        <div class="col-comment">

            **<!-- This works fine - two way bdinding -->**
            <input type="text" data-bind="value:skill.Comment" />

            **<!-- This renders the content but is not two way binding -->**
            <skill-rating-comment params="viewModel:skill"></skill-rating-comment>
        </div>
    </div>

--===== Html for inner template(SkilRatingCommentTemplate.html)====

<input type="text" data-bind="value:comment" />

--======= Js code for inner template ================

define('SkillRating/Component/SkilRatingCommentComponent', ['knockout'], function (ko) {
    function skillRatingCommentViewModel(params) {
        var me = this;     
        me.comment = params.viewModel.Comment;
        return me;
    }
    ko.components.register('skill-rating-comment', {
        viewModel: skillRatingCommentViewModel,
        template: {
            require: 'text!../../Content/HtmlTemplate/SkillAssessmentComponent/SkilRatingCommentTemplate.html'
        }
    });
});

score 1 · Answer 1 · answered Oct 29 '20 at 07:15

This actually seems to work. Have a look at the snippet below. I updated the HTML a bit to emphasize the outer and the inner (component) binding and changed the value binding to a textInput binding to immediately see the changes in the related observable.

function skillRatingCommentViewModel(params) {
  var me = this;
  me.comment = params.viewModel.Comment;
  return me;
}

ko.components.register('skill-rating-comment', {
  viewModel: skillRatingCommentViewModel,
  template: '<p>Inner <input type="text" data-bind="textInput:comment" /></p>'
});

ko.applyBindings({
  skills: ko.observableArray([{
    Comment: ko.observable('Comment 1')
  }, {
    Comment: ko.observable('Comment 2')
  }])
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="skill-rating-section" data-bind="foreach: { data: skills, as: 'skill' }">
  <div class="col-comment">
    <p>Outer <input type="text" data-bind="textInput:skill.Comment" /></p>
    <skill-rating-comment params="viewModel:skill"></skill-rating-comment>
  </div>
  <hr/>
</div>

Hi Philip, Thanks for the answer. one question here, my array items have more properties in it, not just the comment. Do I need to make every single property observable if I need to have two-way binding? what the "observableArray" does here? And If I remove the observable from the comment, why it works for outer input and but not the template? — Reza Shirazi, Oct 29 '20 at 17:35
In short: an `observableArray` is needed for two way binding of the items added to or removed from the array. An `observable` is needed for each property on a single item which needs two way binding. — Philip Bijker, Oct 30 '20 at 06:53

knockout template observable not working when passing value to inner template

1 Answers1