Wednesday, September 5, 2018

HTML KnockoutJS intellisense in Visual Studio Code

Leave a Comment

Using Visual Studio Code I want to enable HTML KnockoutJS intellisense, based on a binding. There's a snag as I use TypeScript (TS) and bind the model in code:

ko.applyBindings(myViewModel); 

All TS files are generated and rendered into app.js

I want a similar functionality found here. https://johnpapa.net/knockout-intellisense-in-visual-studio-2012/

example intellisense functionality

NB: I'm using debug version of KnockoutJS

<script src="libraries/knockout-3.4.1.debug.js" type="text/javascript"></script> 

1 Answers

Answers 1

EDIT


Just noticed one thing after writing the answer, you are applying binding correctly but after that missing object name before function name, here what is difference here:

For Example,

Adding binding:

ko.applyBindings(seViewModel, document.getElementById("Div")); 

Using binding :

<div data-bind="foreach: ko.utils.arrayFilter(seViewModel.ImplementationModels(), function(item) {return item.ModelType()==globalMessages.IN_A_DAY})">                                                                         <label class="checkbox-inline">                                                                             <input type="radio" group="implementationModelGroup" class="implementationModelCheck" data-bind="value: ImplementationModelId, click: seViewModel.ImplementationModelCheckBoxClick.bind($data), checked:seViewModel.ImplementationModelCheckedValue()" />                                                                             <span class="subData text-break" data-bind="text: ImplementationModelName"></span>                                                                         </label>                                                                     </div> 

Here if I don't use viewmodel name seViewModel autocomplete doesn't work


Not sure about why it is not working for you, I opened an old project in VS code & it was already working. It is not only giving autocomplete for KO object but also for my viewmodel & controller action methods in C# class, I am adding a screenshot for reference enter image description here

I am adding my current project setting & vs extensions, it might help you.

VS CODE Details :

Version: 1.26.1 Commit: 493869ee8e8a846b0855873886fc79d480d342de Date: 2018-08-16T18:38:57.434Z Electron: 2.0.5 Chrome: 61.0.3163.100 Node.js: 8.9.3 V8: 6.1.534.41 Architecture: x64 

Extensions :

enter image description here

Which KO files I have added:

 <Content Include="Scripts\libs\knockout-3.4.0.js" />  <Content Include="Scripts\libs\knockout.mapping-latest.js" />  <Content Include="Scripts\libs\knockout.validation.min.js" /> 

It is ASP.NET MVC project, KO is used for model-attribute binding.

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment